Vue?eventBus事件總線封裝后再用怎么實現

今天小編給大家分享一下Vue eventBus事件總線封裝后再用怎么實現的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

空vue實例構建的事件總線

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

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

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

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

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

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

簡單的方式

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

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

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

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

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

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

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

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

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

復雜又簡單的方式

先構思下，想要個什么樣效果的，比如，我不想要用的時候都要引入下文件，要一次引入，處處可用; 我不想要兩個 $ 的調用方式，或者說可以隨心情的使用; 再者通過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);

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

上面這幾種方式均可。是不是更靈活了呢。想怎么用就怎么用,再也不用擔心會寫錯調用方式了。

以上就是“Vue eventBus事件總線封裝后再用怎么實現”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。