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 相关文章推荐
Maps Javascript
Jan 22 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
理解javascript中的闭包
Jan 11 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
php正则
2006/07/07 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
Javascript事件实例详解
2013/11/06 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
vue从使用到源码实现教程详解
2016/09/19 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
Python简单实现enum功能的方法
2016/04/25 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
python reverse反转部分数组的实例
2018/12/13 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python中的流程控制详解
2021/02/18 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
会计专业导师推荐信
2014/03/08 职场文书
网站美工岗位职责
2014/04/02 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书