前言
vue組件非常常見的有父子組件通信鬓催，兄弟組件通信。而父子組件通信就很簡單茄厘，父組件會(huì)通過 props 向下傳數(shù)據(jù)給子組件蚁阳，當(dāng)子組件有事情要告訴父組件時(shí)會(huì)通過 $emit 事件告訴父組件。而兩個(gè)毫不相關(guān)的界面通訊我們又可以用到vuex和今天要說的eventbus宝穗，本文就對(duì)eventbus使用時(shí)遇到的問題以及怎么處理做說明户秤，至于怎么使用就不過多贅述了。
問題1： 頁面A使用emit為什么第一次進(jìn)入B的時(shí)候頁面B中的on事件沒有被觸發(fā)
??這就涉及到vue的生命周期問題了逮矛，如果A的emit方法寫在了跳轉(zhuǎn)方法里這時(shí)候B界面其實(shí)還沒有創(chuàng)建鸡号，這時(shí)候通知是觸發(fā)不了B的on事件。至于怎么解決問題须鼎，其實(shí)看下面的圖片大家就清楚了鲸伴。
image.png
所以，我們可以把A頁面組件中的emit事件寫在beforeDestory中去晋控。因?yàn)檫@個(gè)時(shí)候汞窗，B頁面組件已經(jīng)被created了，也就是我們寫的on事件已經(jīng)觸發(fā)了赡译。
所以可以仲吏，在beforeDestory的時(shí)候，emit事件蝌焚。
A界面
// 跳轉(zhuǎn)界面的方法
editList (index, date, item) {
// 點(diǎn)擊進(jìn)入編輯的頁面裹唆，需要傳遞的參數(shù)比較多。
this.$router.replace({path: '/B'})
}
// bus通知的方法
beforeDestroy () {
bus.$emit('get', { name:'A'})
}
B界面
// bus通知的方法
create() {
bus.$on('get', (data)=>{
})
}
這個(gè)問題就解決了
問題2： 為什么后面再一次依次去觸發(fā)的時(shí)候會(huì)出現(xiàn)只洒，每一次都會(huì)發(fā)現(xiàn)好像之前的on事件分發(fā)都沒有被撤銷一樣许帐，導(dǎo)致每一次的事件觸發(fā)執(zhí)行越來越多。
??這就是因?yàn)閎us的on事件是不會(huì)自動(dòng)清楚銷毀的毕谴，需要我們手動(dòng)來銷毀成畦。
// 在B組件頁面中添加以下語句，在組件beforeDestory的時(shí)候銷毀析珊。
beforeDestroy () {
bus.$off('get', ()=>{})
}
