vue之$eventBus非父子組件傳值使用解析

- 在vue中,我們可以使用props和$emit進行父子組件的傳值,但是如果需要互相傳值的組件不是父子關系,這時我們使用props進行傳值就會非常麻煩,

- 這個時候我們就可以用到$eventBus

### 聲明eventBus

- 我們在js入口文件中給vue原型聲明一個$eventBus,他的值是一個不帶dom組件的vue實例

? ? ? ? ? ? ? ? Vue.prototype.$evnetBus = new Vue();

- 這樣我們在一個組件創建時候進行一個事件監聽

? ? ? ? ? ? ? ? //在組件一中我們可以在created中進行監聽

? ? ? ? ? ? ? ? ? ? created(){? ? this.$eventBus.$on(? ? ? "? 事件名 1"? ? ? ,? ? ? "事件處理函數1"? ? )? ? }


- 觸發eventBus

? ? ? ? ? ? ? ? //在組件二中我們就可以在任意地方進行觸發

? ? ? ? ? ? ? ? ? ? this.$eventBus.$emit(? "? 事件名1 "? ,? ? "? 需要傳遞的參數1? "? )

? - 這樣我們組件一中的事件監聽被執行,傳遞的參數就收到了

? - $eventBus使用起來很方便,但是如果不正確的使用,將會是一場災難,組件如果被循環得創建和銷毀,$eventBus的監聽需要我們手動移除,不然因為外部的引用會一直存在,在后期被反復觸發,因此所有$evnetBut的監聽需要我們在組件銷毀時候將監聽進行移除

- 我們可以在vue生命周期beforDestory中進行移除,因為我們上面再組件一的created中執行了監聽,我們同樣在組件一的beforDestory中寫入以下代碼保證在組件一在被銷毀時候移除監聽

- 移除eventBus監聽

? ? ? ? beforDestory(){? ? this/$eventBus.off (? ? "事件名1"? ? )? }

- 以上,我們就使用$eventBus進行了一個組件二給組件一傳值,并且組件一在銷毀時候移除監聽的完整操作

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容