前言
vue組件非常常見的有父子組件通信,兄弟組件通信。而父子組件通信就很簡單,父組件會通過 props 向下傳數據給子組件,當子組件有事情要告訴父組件時會通過 $emit 事件告訴父組件。而兩個毫不相關的界面通訊我們又可以用到vuex和今天要說的eventbus,本文就對eventbus使用時遇到的問題以及怎么處理做說明,至于怎么使用就不過多贅述了。
問題1: 頁面A使用emit為什么第一次進入B的時候頁面B中的on事件沒有被觸發
??這就涉及到vue的生命周期問題了,如果A的emit方法寫在了跳轉方法里這時候B界面其實還沒有創建,這時候通知是觸發不了B的on事件。至于怎么解決問題,其實看下面的圖片大家就清楚了。
image.png
所以,我們可以把A頁面組件中的emit事件寫在beforeDestory中去。因為這個時候,B頁面組件已經被created了,也就是我們寫的on事件已經觸發了。
所以可以,在beforeDestory的時候,emit事件。
A界面
// 跳轉界面的方法
editList (index, date, item) {
// 點擊進入編輯的頁面,需要傳遞的參數比較多。
this.$router.replace({path: '/B'})
}
// bus通知的方法
beforeDestroy () {
bus.$emit('get', { name:'A'})
}
B界面
// bus通知的方法
create() {
bus.$on('get', (data)=>{
})
}
這個問題就解決了
問題2: 為什么后面再一次依次去觸發的時候會出現,每一次都會發現好像之前的on事件分發都沒有被撤銷一樣,導致每一次的事件觸發執行越來越多。
??這就是因為bus的on事件是不會自動清楚銷毀的,需要我們手動來銷毀。
// 在B組件頁面中添加以下語句,在組件beforeDestory的時候銷毀。
beforeDestroy () {
bus.$off('get', ()=>{})
}