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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
基于redis的小程序登录实现方法流程分析
May 25 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php输入流php://input使用浅析
2014/09/02 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
常用python数据类型转换函数总结
2014/03/11 Python
Python中无限元素列表的实现方法
2014/08/18 Python
python中bisect模块用法实例
2014/09/25 Python
Python探索之pLSA实现代码
2017/10/25 Python
python实现归并排序算法
2018/11/22 Python
酒店执行总经理岗位职责
2013/12/15 职场文书
就业协议书的作用
2014/04/11 职场文书
刊首寄语大全
2014/04/11 职场文书
铁路安全事故反思
2014/04/26 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
质量负责人岗位职责
2015/02/15 职场文书
新郎结婚保证书
2015/02/26 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis