- 在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進行了一個組件二給組件一傳值,并且組件一在銷毀時候移除監聽的完整操作