Vue中eventbus很頭疼?我來幫你

JserWang發表於2018-07-11

話不多說,直接上乾貨

現存痛點

  • 你只是想簡單的要一個事件的釋出訂閱來通知下兄弟元件執行個方法?
  • 你是否還在為引入一個eventbus後,每次還要手動呼叫解除安裝(off)而頭疼?
  • 你是否還在為要去想各種bus的【pub、sub】、【$on、$emit】、【fire、listen】balabala一系列的方法名字而頭疼?

如果上面是你的痛點,那麼今日你開始你用Vue幸福的日子來了:

vue-event-proxy

通過最小的代價,讓你的Vue支援全域性事件,用了它,你僅需要在需要做全域性通知的時候,加入 global:字首即可完成全域性事件釋出,簡單嗎?

    this.$emit('global:你的事件名字');
複製程式碼

有釋出,那麼監聽呢?

    this.$on('global:你的事件名字', () => {});
複製程式碼

怎麼樣?是不是除了在事件名字前面加了global:其他都沒變化,如果你還不瞭解Vue這部分內容,我幫你準備好了,官方文件

使用方法

$ npm install --save vue-event-proxy
複製程式碼

在你專案的主入口(vue-cli生成的main.js)中加入:

  import EventProxy from 'vue-event-proxy';
  Vue.use(EventProxy);
複製程式碼

接下來,盡情的使用吧。

如果對此實現感興趣,原始碼地址奉上。

相關文章