首頁 > web前端 > js教程 > Vue中eventbus的解析

Vue中eventbus的解析

不言
發布: 2018-07-13 17:16:58
原創
2341 人瀏覽過

這篇文章主要介紹了關於Vue中eventbus的解析,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

話不多說,直接上乾貨

現存痛點

  • 你只是想簡單的要一個事件的發布訂閱來通知下兄弟元件執行個方法?

  • 你是否還在為引入一個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);
登入後複製

接下來,盡情的使用吧。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

Debounce函數與Throttle函數的實作原理

以上是Vue中eventbus的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板