Vue的事件總線

原本存在直接相關的父子組件之間進行數據的交互，但是對於組件之間沒有直接的，如何進行數據交互呢?

事件總線和Vuex的區別在於：Vuex是對狀態進行管理的而事件總線是對事件進行管理的。

提供了一個全局事件中心，並將其注如每個組件中，像內置的事件流一樣方便的使用全局事件

工作原理就是使用發布/訂閱方式

1.事件總線的創建

import Vue from 'vue'
export const EventBus = new Vue()　

創建一個全局的事件總線

// main.js
Vue.prototype.$EventBus = new Vue()

2.發送消息

EventBus.$emit("aMsg", '來自A頁面的消息'); //A發送消息給B

3.監聽接收消息

EventBus.$on("aMsg", (msg) => {// A發送來的消息
　　this.msg = msg; //B監聽接收到A的消息就是msg數據
 });

4.移除事件

EventBus.$off('aMsg', {})

 

在Vue項目中創建一個EventBus,事件總線

var EventBus = new Vue(); //事件總線據是一個全局的原型對象中的屬性對象
 
Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

this.$bus.$emit('nameOfEvent', { ... pass some event data ...}); //調用原型屬性進行數據發送和監聽
 
this.$bus.$on('nameOfEvent',($event) => {
  // ...
})