vue -- 非父子组件传值，事件总线（eventbus）的使用方式

原地址：vue -- 非父子组件传值，事件总线（eventbus）的使用方式 - 积少成多 - CSDN博客

下面的组件A和组件B可以是项目中任意两个组件

//在mian.js中

Vue.prototype.bus = new Vue()  //这样我们就实现了全局的事件总线对象

//组件A中，监听事件

this.bus.$on('updata', function(data) {

    console.log(data)  //data就是触发updata事件带过来的数据

})

//组件B中，触发事件

this.bus.$emit('updata', data)  //data就是触发updata事件要带走的数据

方式二，稍微有点麻烦，但也很容易理解

大概的实现思路： 新建一个bus.js文件， 在这个文件里实例化一下vue；然后在组件A和组件B中分别引入这个bus.js文件，将事件监听和事件触发都挂到bus.js这个实例上，这样就可以实现全局的监听与触发了

写个例子

bus.js文件

// bus.js文件

import Vue from 'vue'

export default new Vue()

组件A

// 组件A ，监听事件send

组件B

// 组件B， 触发事件send