EventBus稱為事件總線,當(dāng)兩個組件屬于不同的兩個組件分支,或者兩個組件沒有任何聯(lián)系的時候,不想使用Vuex這樣的庫來進行數(shù)據(jù)通信,就可以通過事件總線來進行通信,這篇文章主要給大家介紹了關(guān)于Vue?eventBus事件總線封裝后再用的相關(guān)資料,需要的朋友可以參考下

前言

現(xiàn)在的項目中是不是在使用 eventbus 的時候，還有很多人都是直接創(chuàng)建一個vue 實例直接使用的，哪里需要哪里引入，而沒有簡單的處理下。接下來就先說下這種方式。

空vue實例構(gòu)建的事件總線

在改造一個項目的時候就發(fā)現(xiàn)，里面的 bus.js 文件中就是這么處理的。兩行代碼搞定。

import Vue from "vue"; 
export default new Vue()

使用的時候，就沒那么簡單了，有這么一個空的容器，在需要傳值的組件里就得引入這個文件。然后通過 bus.on()綁定事件，通過bus.on() 綁定事件，通過 bus.on()綁定事件，通過bus.emit()進行分發(fā)事件。

import bus from'@/utils/bus'
// 綁定事件
bus.$on('event',()=>{....})

// 監(jiān)聽事件
bus.$emit('event',this.tasks)

這種方式使用起來也簡單但也不太方便，畢竟到處都要引入下，那有沒有什么辦法可以解決呢。繼續(xù)...

簡單的方式

先來個簡單的吧，雖然看上去有點不太習(xí)慣，但的確也挺好使的，而且直接掛載到vue實例上，哪里用哪里直接 this 即可，相對來說方便多了，不用到處引入文件了。掛載方式如下：

new Vue({
  beforeCreate() {
    // 盡量早地執(zhí)行掛載全局事件總線對象的操作
    Vue.prototype.$bus = this;
  },
  router,
  store,
  render: h => h(App)
}).$mount('#app');

這種方式雖然掛載簡單，但是使用上還是有點不能盡如人意，不信你看：

// 綁定事件
this.$bus.$on('send', ()=>{ // 使用事件 });

// 分發(fā)事件
this.$bus.$emit('send', 'emit');

猛地一看，這不挺好的么，挺簡單的啊！可是我有潔癖怎么辦，我有強迫癥怎么辦，我就不想看到兩個 $符怎么辦我就只想要下面的這種方式的：

// 綁定事件
this.$bus.on('send', ()=>{ // 使用事件 });

// 分發(fā)事件
this.$bus.emit('send', 'emit');

那你說，人家都是 $on、$emit的用的，怎么就不行了啊，實在不行就自己改造個吧，說干就干，who 怕 who，安排！

復(fù)雜又簡單的方式

先構(gòu)思下，想要個什么樣效果的，比如，我不想要用的時候都要引入下文件，要一次引入，處處可用; 我不想要兩個 $ 的調(diào)用方式，或者說可以隨心情的使用; 再者通過Vue對象也可以直接使用。

思路大概理了理，那就開干唄，簡單干脆點，直接上代碼！

'use strict';
function VueBus(Vue) {
  let bus = new Vue();

  Object.defineProperties(bus, {
    on: {
      get() {
        return this.$on.bind(this);
      }
    },
    once: {
      get() {
        return this.$once.bind(this);
      }
    },
    off: {
      get() {
        return this.$off.bind(this);
      }
    },
    emit: {
      get() {
        return this.$emit.bind(this);
      }
    }
  });

  Object.defineProperty(Vue, 'bus', {
    get() {
      return bus;
    }
  });

  Object.defineProperty(Vue.prototype, '$bus', {
    get() {
      return bus;
    }
  });
  if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(VueBus);
  }

  return bus;
}

export default VueBus;

來看看使用方式吧，是不是跟想象的一樣簡單，在 main.js 中引入，并通過 vue.use() 注入進來，加載方式就這么簡單。

import EventBus from '@/libs/bus';

Vue.use(EventBus);

使用上更靈活了，想怎么用就怎么用，支持以下幾種方式，至于$off、$once使用上通 $on、$emit一樣。

// 綁定事件
this.$bus.on('send', this.handleSend); // 推薦
this.$bus.$on('send', this.handleSend);
Vue.bus.on('send', this.handleSend);
Vue.bus.$on('send', this.handleSend);

// 分發(fā)事件
this.$bus.emit('send', ''); // 推薦
this.$bus.$emit('send', 'emit');
Vue.bus.emit('send', 'emit');
Vue.bus.$emit('send', 'emit');

上面這幾種方式均可。是不是更靈活了呢。想怎么用就怎么用,再也不用擔(dān)心會寫錯調(diào)用方式了。