在vue中,我們可以使用props和$emit進(jìn)行父子組件的傳值,但是如果需要互相傳值的組件不是父子關(guān)系,這時(shí)我們使用props進(jìn)行傳值就會(huì)非常麻煩,
這個(gè)時(shí)候我們就可以用到$eventBus
聲明eventBus
-
我們?cè)趈s入口文件中給vue原型聲明一個(gè)$eventBus,他的值是一個(gè)不帶dom組件的vue實(shí)例
Vue.prototype.$evnetBus = new Vue(); -
這樣我們?cè)谝粋€(gè)組件創(chuàng)建時(shí)候進(jìn)行一個(gè)事件監(jiān)聽(tīng)
//在組件一中我們可以在created中進(jìn)行監(jiān)聽(tīng) created(){ this.$eventBus.$on( " 事件名 1" , "事件處理函數(shù)1" ) } -
觸發(fā)eventBus
//在組件二中我們就可以在任意地方進(jìn)行觸發(fā) this.$eventBus.$emit( " 事件名1 " , " 需要傳遞的參數(shù)1 " )這樣我們組件一中的事件監(jiān)聽(tīng)被執(zhí)行,傳遞的參數(shù)就收到了
- eventBus的監(jiān)聽(tīng)需要我們手動(dòng)移除,不然因?yàn)橥獠康囊脮?huì)一直存在,在后期被反復(fù)觸發(fā),因此所有$evnetBut的監(jiān)聽(tīng)需要我們?cè)诮M件銷毀時(shí)候?qū)⒈O(jiān)聽(tīng)進(jìn)行移除
我們可以在vue生命周期beforDestory中進(jìn)行移除,因?yàn)槲覀兩厦嬖俳M件一的created中執(zhí)行了監(jiān)聽(tīng),我們同樣在組件一的beforDestory中寫(xiě)入以下代碼保證在組件一在被銷毀時(shí)候移除監(jiān)聽(tīng)
-
移除eventBus監(jiān)聽(tīng)
beforDestory(){ this/$eventBus.off ( "事件名1" ) } 以上,我們就使用$eventBus進(jìn)行了一個(gè)組件二給組件一傳值,并且組件一在銷毀時(shí)候移除監(jiān)聽(tīng)的完整操作
