vue事件总线EventBus

vue组件有父子组件通信:props
兄弟组件通信:
可以使用vuex，还可以使用事件总线eventBus

使用方法：
1.初始化：
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

另外一种方式，可以直接在项目中的 main.js 初始化 EventBus :
// main.js
Vue.prototype.$EventBus = new Vue()

2.发送事件
import { EventBus } from "../event-bus.js";
export default {
methods: {
sendMsg() {
EventBus.on("aMsg", (msg) => {
// A发送来的消息
this.msg = msg;
});

EventBus如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。
4.移除监听
import {
eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})

全局EventBus

var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})

在这个特定的总线中使用两个方法emit。一个用于创建发出的事件，它就是on：

var EventBus = new Vue();

this.emit('nameOfEvent', { ... pass some event data ...});

this.on('nameOfEvent',(bus.$emit("sendMsg", '我是web秀');，另一个Vue页面使用

this.on('updateMessage', function(value) {
console.log(value); // 我是web秀
})
同时也可以使用this.off('sendMsg')来移除事件监听。