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 相关文章推荐
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
token 机制和实现方式
Dec 15 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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
如何使用PHP获取网络上文件
2006/10/09 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
php fread函数使用方法总结
2019/05/28 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
python计算两个地址之间的距离方法
2018/06/09 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
什么是makefile? 如何编写makefile?
2013/01/02 面试题
平民服装店创业计划书
2014/01/17 职场文书
普通员工辞职信
2014/01/17 职场文书
年度考核自我鉴定
2014/02/02 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
公司活动总结范文
2014/07/01 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python