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 相关文章推荐
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
javascript网页随机点名实现过程解析
Oct 15 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
FCKeditor添加自定义按钮
2008/03/27 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
List Installed Hot Fixes
2007/06/12 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
pycharm 安装JPype的教程
2019/08/08 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
自我鉴定模板
2013/10/29 职场文书
生物制药专业求职信
2014/03/11 职场文书
联欢晚会主持词
2014/03/25 职场文书
小学生操行评语大全
2014/04/22 职场文书
财务人员担保书
2014/05/13 职场文书
法律专业求职信
2014/05/24 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
投资意向协议书
2015/01/29 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Python jiaba库的使用详解
2021/11/23 Python