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 11 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
js逆向解密之网络爬虫
May 30 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
JavaScript基于SVG的图片切换效果实例代码
Dec 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
PHP4和PHP5共存于一系统
2006/11/17 PHP
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP安全配置详细说明
2011/09/26 PHP
php使用百度天气接口示例
2014/04/22 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
JS验证码实现代码
2017/09/14 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
土木工程专业自荐信
2013/10/04 职场文书
面试后感谢信
2014/02/01 职场文书
药店主任岗位责任制
2014/02/10 职场文书
英文自荐信范文
2015/03/25 职场文书
CSS的calc函数用法小结
2022/06/25 HTML / CSS