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 学习笔记 选择器之四
Jul 23 Javascript
javascript 闭包
Sep 15 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 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适配器模式介绍
2012/08/14 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
js实现倒计时时钟的示例代码
2013/12/17 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
详解Python中的正则表达式
2018/07/08 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python随机数函数代码实例解析
2020/02/09 Python
numpy实现RNN原理实现
2021/03/02 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
护理毕业生自荐信范文
2013/12/22 职场文书
50岁生日感言
2014/01/23 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
会计员岗位职责
2014/03/15 职场文书
人事经理岗位职责
2014/04/28 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Redis实现短信验证码登录的示例代码
2022/06/14 Redis
Nginx报404错误的详细解决方法
2022/07/23 Servers