vue 事件總線eventBus的使用詳解

因為在自己的項目不需要類似Vuex這樣的庫來處理組件之間的數據通信,所以使用了事件總線存儲了電話進線的數據,反復操作之后,導致內存暴漲,頁面卡死,所以使用該方法的時候要特別注意,特此記錄一下. 

使用場景：非父組件通信時，可以向該中心注冊發送事件或接收事件，需要的到總線取值就行

注意點：該方法使用起來雖然方便，但EventBus 在監聽的時候就會觸發很多次，是一個非常大的隱患。一般在項目中會在vue頁面銷毀時，同時移除EventBus 事件監聽.下面會給出發消息——接收消息——移除監聽詳細流程

借鑒文章:https://my.oschina.net/u/2518341/blog/2960762

1.在項目中新建event-bus.js

const install = function (Vue) {
  const Bus = new Vue({
    methods: {
      emit(event, ...args) {
        this.$emit(event, ...args);
      },
      on(event, callback) {
        this.$on(event, callback);
      },
      off(event, callback) {
        this.$off(event, callback);
      }
    }
  });
  Vue.prototype.$EventBus = Bus;
};
export default install;

2.mian.js 中引入

import VueBus from './event-bus'
Vue.use(VueBus);

3.發送消息

this.$EventBus.$on("aMsg", this.timerFun);
methods: {
    timerFun () {
      this.timer = new Date().getTime()
    }
}

4.接收消息

 this.$EventBus.$on("aMsg", this.getWorkOrderListInfo);

 this.getWorkOrderListInfo是我自己頁面寫的方法

5.移除監聽

強調:特別重要,切記一定要在vue頁面銷毀的時候移除監聽的事件

 beforeDestroy () {
    this.$EventBus.off('aMsg', this.getWorkOrderListInfo);
  },

　文章如有不足,還望指教,謝謝