简介
在Vue中如果两个页面组件中没有任何引入和被引入关系，该如何通信呢？首先可能会想到是Vuex ，但是如果应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通信，就可以考虑 Vue 中的事件总线 ，即 eventBus 来通信。
eventBus 又称为事件总线。在 Vue 中可使用 eventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。由于太方便如若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的 Vuex 作为状态管理中心，将通知的概念上升到共享状态层次。
使用
- 定义在组件中使用
import Vue from 'vue'
export const EventBus = new Vue()
- 定义在全局中使用（main.js文件）
// 创建全局EventBus
Vue.prototype.$EventBus = new Vue()
var EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
}
- 在组件中使用
3.1 向EventBus发送事件
this.$EventBus.$emit(发送的事件名,传递的参数)
3.2 接收事件
this.$EventBus.$on(监听的事件名, 回调函数)
3.3 移除监听事件
在组件离开，也就是被销毁前，需要将监听事件给移除，以免下次再重复创建监听
//移除指定的事件监听：this.$EventBus.$off(事件名, {})
/ 移除所有的事件监听：this.$EventBus.$off()
案例：假设有两个Vue组件需要通信 ，在 A 组件的按钮上面绑定了点击事件发送一则消息，想通知 B 组件。
// A 组件
<template>
<div class="wrap">
<button @click="sendMsg">触发</button>
</div>
</template>
<script>
export default {
data(){
return {
Amsg:'我是来自A组件的信息',
}
},
methods:{
sendMsg(){
this.$bus.emit('changeMsg', this.Amsg );
this.$bus.emit('doOnce','我只会触发一次');
}
},
}
</script>
A组件已经向全局事件总线EventBus发送了一个aMsg事件，这时B组件就可以去aMsg监听这个事件，并可以获得一些数据。
// B 组件
<template>
<div>
<h3>{{Bmsg}}</h3>
</div>
</template>
<script>
export default {
data(){
return {
Bmsg:'我是B组件',
}
},
methods:{
getMsg(msg){
this.Bmsg = msg;
console.log(msg);
}
},
created(){
/*
* 接收事件
* 这种写法也体现了：A 组件调用 B 组件中的方法。如果只是传递数据，可参考如下简化写法：
* this.$bus.on('changeMsg', (msg) => { this.Bmsg = msg });
*/
this.$bus.on('changeMsg', this.getMsg);
// 此侦听器只会触发一次
this.$bus.once('doOnce', (txt) => { console.log(txt) });
},
// 组件销毁时，移除EventBus事件监听
beforeDestroy() {
this.$bus.off('changeMsg', this.getMsg);
},
}
</script>
总结
eventBus 适合小项目、数据被更少组件使用的项目，对于中大型项目数据在很多组件之间使用的情况 eventBus 就不太适用了。eventBus 其实就是一个发布订阅模式，利用 Vue 的自定义事件机制，在触发的地方通过 $emit 向全局Bus外发布一个事件，在需要监听的页面，通过$on 监听事件。最后在组件销毁时，需要通过$off将事件移除监听
