码迷,mamicode.com
首页 > 其他好文 > 详细

vue兄弟组件通信

时间:2018-08-09 13:55:37      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:return   插件   ted   组件通信   事件对象   另一个   监听事件   事件   通过   

所有需要通信的组件共用一个事件对象。new Vue(),新new一个vue对象,然后所有组件都访问这个对象,通过这个对象$emit事件,也通过这个对象$on监听事件。

实现一:直接在单文件里面实例化根Vue的时候,在data里return一个属性,值为new Vue(),例如bus: new Vue()

在具体的组件页面上,直接用this.$root.bus.$emit(‘eventName‘)发送事件。

在另一个组件页面的mounted函数里面,用this.$root.bus.$on(‘eventName‘, () => { // 一些要做的事  } )监听事件。

实现二:把共用的事件对象单独抽成一个bus.js文件,哪个组件要用到就引用进来,然后$emit或者$on。

实现三:抽成bus.js文件后,还可以作为Vue的插件。

 

vue兄弟组件通信

标签:return   插件   ted   组件通信   事件对象   另一个   监听事件   事件   通过   

原文地址:https://www.cnblogs.com/coconutGirl/p/9447944.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!