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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
JS获取父节点方法
Aug 20 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
微信小程序文章列表功能完整实例
Jun 03 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生成静态文件的多种方法分享
2012/07/17 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
python轮询机制控制led实例
2020/05/03 Python
如何使用python写截屏小工具
2020/09/29 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
将相和教学反思
2014/02/04 职场文书
《画家乡》教学反思
2014/04/22 职场文书
装修施工安全责任书
2014/07/24 职场文书
企业领导对照检查材料
2014/08/20 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
2014年检验员工作总结
2014/11/19 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
收入证明范本
2015/06/12 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
python playwrigh框架入门安装使用
2022/07/23 Python