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 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
layui扩展上传组件模拟进度条的方法
Sep 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
php微信开发之图片回复功能
2018/06/14 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
python如何随机生成高强度密码
2020/08/19 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
一道Delphi面试题
2016/10/28 面试题
工作评语大全
2014/04/26 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
公司庆典主持词
2015/07/04 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
交通安全学习心得体会
2016/01/18 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Python实现8种常用抽样方法
2021/06/27 Python
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL