Vue父组件调用子组件事件方法


Posted in Javascript onFebruary 23, 2018

Vue父组件向子组件传递事件/调用事件

不是传递数据(props)哦,适用于 Vue 2.0

方法一:子组件监听父组件发送的方法

方法二:父组件调用子组件方法

子组件:

export default {
  mounted: function () {
   this.$nextTick(function () {
    this.$on('childMethod', function () {
     console.log('监听成功')
    })
   })
  },
  methods {
    callMethod () {
     console.log('调用成功')
    }
  }
}

父组件:

<child ref="child" @click="click"></child>

export default {
  methods: {
   click () {
   this.$refs.child.$emit('childMethod') // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}

以上这篇Vue父组件调用子组件事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js function使用心得
May 10 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
js常见遍历操作小结
Jun 06 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
vue实现密码显示隐藏切换功能
Feb 23 #Javascript
对vue.js中this.$emit的深入理解
Feb 23 #Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 #Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
vue中动态绑定表单元素的属性方法
Feb 23 #Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 #Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 #Javascript
You might like
一个图形显示IP的PHP程序代码
2007/10/19 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
php json相关函数用法示例
2017/03/28 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Django中几种重定向方法
2015/04/28 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Django框架安装方法图文详解
2019/11/04 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
大学生活自我评价
2014/04/09 职场文书
股份转让协议书
2014/04/12 职场文书
啤酒节策划方案
2014/05/28 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2014年转正工作总结
2014/11/08 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python