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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
vue组件横向树实现代码
Aug 02 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
JavaScript This指向问题详解
Nov 25 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 strtotime函数详解
2009/12/18 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
php实现倒计时效果
2015/12/19 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
vuex的简单使用教程
2018/02/02 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python实现从url中提取域名的几种方法
2014/09/26 Python
快速入门python学习笔记
2017/12/06 Python
python编程线性回归代码示例
2017/12/07 Python
python中的随机函数小结
2018/01/27 Python
python实现QQ批量登录功能
2019/06/19 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
django中的图片验证码功能
2019/09/18 Python
Python箱型图处理离群点的例子
2019/12/09 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
小学后勤管理制度
2014/01/14 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
关于分班的感言
2015/08/04 职场文书
爱国教育主题班会
2015/08/14 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书