一、為什么要使用vue-bus讹俊?
學習vue的開發(fā)者都知道泡挺,父子組件的直接的通訊直接使用vue提供的props屬性和emit方法泣刹。props接受來自父組件的參數(shù)助析,emit將子組件的參數(shù)傳遞給父組件。這樣一來父子組件之間的參數(shù)傳遞就得到了解決椅您。(之前做項目的時候看到$parent和$children也可以進行父子組件和兄弟之間的參數(shù)傳遞外冀,但是不提倡,原因在于如果組件想要替換位置就有問題)掀泳。
那么問題來了雪隧,兄弟組件如何進行通訊西轩?有哪些方法
1、vuex全局狀態(tài)管理
2脑沿、bus總線機制/發(fā)布訂閱者模式/觀察者模式
兩者相比較藕畔,前者適用于大型項目的開發(fā),如果項目業(yè)務沒那么復雜庄拇,推薦使用bus來進行解決這類問題注服。
二、vue-bus如何使用措近?
第一步:使用npm install vue-bus --save
第二步:在main.js進行全局注冊
第三步:在一個頁面引用兩個兄弟組件
第四步:使用emit進行參數(shù)傳遞
第五步:在created或mounted生命周期鉤子溶弟,執(zhí)行事件監(jiān)聽。最后記得將觸發(fā)的事件銷毀瞭郑,不然會出現(xiàn)點擊多次觸發(fā)的情況可很。
三、bus總線機制/發(fā)布訂閱者模式/觀察者模式
比如有一個bus對象(中央事件總線)凰浮,這個對象上有兩個方法,一個是on(監(jiān)聽苇本,也就是訂閱)袜茧,一個是emit(觸發(fā),也就是發(fā)布)瓣窄,就好比我們訂閱報紙笛厦,到報社去付錢,才知道你要訂閱的俺夕。
觀察者模式是用來監(jiān)聽數(shù)據(jù)變化裳凸,改變視圖層。
有什么解釋的不好的劝贸,希望幫我指正姨谷,萬分感謝。
對你有幫助的給個贊