Vue 事件总线（eventbus）的使用方式

通过返回一个vue实例把事件绑定在vue实例上

1.第一种写法

1.先在main.js里生成一个vue实例

 

//组件A中，触发事件

  this.$root.myEvent.$emit("trans", value);   //myEvent是main.js里设置的空的vue实例名

 //组件B中，监听事件

that.$root.myEvent.$on("trans", function(msg) {
        console.log("子组件传过来的值  " + msg);
});

 

第二种写法

新建一个文件bus.js

import Vue from 'vue'
export default new Vue()

父子组件里都引入该文件

import Bus from '../bus.js'

//组件A中，触发事件

Bus.$emit("trans", value)

 //组件B中，监听事件

Bus.$on('trans', ( msg) => {
        console.log( msg)
})

 

 

第三种写法

main.js

Vue.prototype.bus = new Vue() 

//组件A中，触发事件

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

 //组件B中，监听事件

this.bus.$on('trans', function(msg) {
    console.log(msg)  
})