事件总线(EventBus)

655 阅读1分钟

为啥要用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', {})`

总结

适合于兄弟组件通信,但是不可滥用