快捷導(dǎo)航

Vue?eventBus事件總線封裝后再用的方式

更新時(shí)間：2022年06月23日 09:37:55 作者：Gaby

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

前言

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

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

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

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

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

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

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

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

簡(jiǎn)單的方式

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

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

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

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

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

猛地一看，這不挺好的么，挺簡(jiǎn)單的??！可是我有潔癖怎么辦，我有強(qiáng)迫癥怎么辦，我就不想看到兩個(gè) $符怎么辦我就只想要下面的這種方式的：

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

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

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

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

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

思路大概理了理，那就開干唄，簡(jiǎn)單干脆點(diǎn)，直接上代碼！

'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;

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

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)心會(huì)寫錯(cuò)調(diào)用方式了。