为啥要用EventBus
在Vue中有其他的方式来处理兄弟组件之间的数据通讯,比如Vuex这样的库。但在很多情况之下,咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通讯,而可以考虑Vue中的 事件总线 ,即 **EventBus
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的灾难,因此才需要更完善的Vuex作为状态管理中心
两种使用方法
// 第一种 ---------
//main.js
let rootVue = new Vue({
el: '#app',
router,
store,
data: {
eventHub: new Vue()
},
template: '<App/>',
components: {
App
}
})
// 调用
this.$root.eventHub.$on('fnName', (val) => { })
this.$root.eventHub.$emit('fnName', params)
//移除事件总线 `this.$root.eventHub.$off('addition', {})`
// 第二种 ----
//eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 调用
EventBus.$on('fnName', (val) => { })
EventBus.$emit('fnName', params)
//移除事件总线 `EventBus.$off('addition', {})`
总结
适合于兄弟组件通信,但是不可滥用