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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 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下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
jQuery调用WebService的实现代码
2011/06/19 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
python实现简单socket通信的方法
2016/04/19 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
python交互式图形编程实例(二)
2017/11/17 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
Django REST 异常处理详解
2020/07/15 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
广州品高软件.net笔面试题目
2012/04/18 面试题
20岁生日感言
2014/01/13 职场文书
家长建议怎么写
2014/05/15 职场文书
中秋联欢会主持词
2015/07/04 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL