Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)


Posted in Javascript onFebruary 08, 2018

有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码:

子组件:

<template> 
  <div class="isShowing" ref="isShowing"> 
    <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> 
      <ul ref="scroll_warpper_ul"> 
        <li class="menu-item" @click="goToFatherDetail(233)"> 
        </li> 
      </ul> 
    </div> 
    <v-loading class="isloading" v-show="hid_show_switch"></v-loading> 
  </div> 
</template> 
<script type="text/ecmascript-6"> 
  export default { 
    methods: { 
      goToFatherDetail (itemId) { 
        // this.$parent.$router.push('goToDetail'); 
        console.log('子组件方法走了' + itemId); 
        this.$emit('refreshbizlines', itemId); /* <span style="font-family: Arial, Helvetica, sans-serif;">itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/</span> 
      } 
    } 
  }; 
</script>

父组件:

<template> 
  <div class="main-wrapper"> 
      <div class="tab-wrapper"> 
        <div class="tab-item"> 
          <router-link to="/isShowing" class="table-item-text">正在热映</router-link> 
        </div> 
        <div class="tab-item"> 
          <router-link to="/willShow" class="table-item-text">即将上映</router-link> 
        </div> 
      </div> 
    </div> 
    <router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view> 
  </div> 
</template> 
<script type="text/ecmascript-6"> 
  export default { 
    methods: { 
      goToDetail (itemId) { 
        console.log('父组件走你:' + itemId); 
      } 
    }<strong> 
  }; 
</script></strong>

父组件用 v-on 来做个监测的函数来检测,最终生成的代码是 类似

on: {
   "refreshbizlines": function($event) {
    _vm.goToDetail(123)
}
}

所以原理就是 子组件 访问 父组件的 检测函数 refreshbizlines ,访问了,则执行 refreshbizline 下面的 函数

goToDetail -- 也就是父组件的

goToDetail函数

注意 父组件 的

v-on:refreshbizlines="goToDetail"

 一定要放在 你父组件调用子组件的 模块名上。

总结

以上所述是小编给大家介绍的Vuejs 2.0 子组件访问/调用父组件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery中each()的使用方法说明
Aug 19 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
web前端页面生成exe可执行文件的方法
Feb 08 #Javascript
ajax前台后台跨域请求处理方式
Feb 08 #Javascript
详解自定义ajax支持跨域组件封装
Feb 08 #Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 #Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 #Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 #Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 #Javascript
You might like
PHP读取目录下所有文件的代码
2008/01/07 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
JavaScript DOM基础
2015/04/13 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python常见的格式化输出小结
2016/12/15 Python
Python中取整的几种方法小结
2017/01/06 Python
python中for用来遍历range函数的方法
2018/06/08 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
使用Tkinter制作信息提示框
2020/02/18 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
大学生职业生涯规划范文
2014/01/08 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
房屋认购协议书
2015/01/29 职场文书
肖申克救赎观后感
2015/06/02 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
Python实现的扫码工具居然这么好用!
2021/06/07 Python
MySQL日期时间函数知识汇总
2022/03/17 MySQL