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 相关文章推荐
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
Adodb的十个实例(清晰版)
2006/12/31 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
基于php实现的验证码小程序
2016/12/13 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
js调试系列 初识控制台
2014/06/18 Javascript
javascript 实现map集合
2015/04/03 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
智能电子应届生求职信
2013/11/10 职场文书
松材线虫病防治方案
2014/06/15 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
社区节水倡议书
2015/04/29 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
力克胡哲观后感
2015/06/10 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS