vue2使用eventbus踩坑解決
前言
vue組件非常常見的有父子組件通信，兄弟組件通信。而父子組件通信就很簡單，父組件會通過 props 向下傳數(shù)據(jù)給子組件，當(dāng)子組件有事情要告訴父組件時會通過 $emit 事件告訴父組件。
而兩個毫不相關(guān)的界面通訊我們又可以用到vuex和今天要說的eventbus，本文就對eventbus使用時遇到的問題以及怎么處理做說明，至于怎么使用就不過多贅述了。
問題1：
頁面A使用emit為什么第一次進(jìn)入B的時候頁面B中的on事件沒有被觸發(fā)
這就涉及到vue的生命周期問題了，如果A的emit方法寫在了跳轉(zhuǎn)方法里這時候B界面其實還沒有創(chuàng)建，這時候通知是觸發(fā)不了B的on事件。
至于怎么解決問題，其實看下面的圖片大家就清楚了。
所以，我們可以把A頁面組件中的emit事件寫在beforeDestory中去。
因為這個時候，B頁面組件已經(jīng)被created了，也就是我們寫的on事件已經(jīng)觸發(fā)了。
所以可以，在beforeDestory的時候，emit事件。
A界面
// 跳轉(zhuǎn)界面的方法
editList (index, date, item) {
// 點擊進(jìn)入編輯的頁面，需要傳遞的參數(shù)比較多。
this.$router.replace({path: '/B'})
}
// bus通知的方法
beforeDestroy () {
bus.$emit('get', { name:'A'})
}
B界面
// bus通知的方法
create() {
bus.$on('get', (data)=>{
})
}這個問題就解決了
問題2：
為什么后面再一次依次去觸發(fā)的時候會出現(xiàn)，每一次都會發(fā)現(xiàn)好像之前的on事件分發(fā)都沒有被撤銷一樣，導(dǎo)致每一次的事件觸發(fā)執(zhí)行越來越多。
這就是因為bus的on事件是不會自動清楚銷毀的，需要我們手動來銷毀。
// 在B組件頁面中添加以下語句，在組件beforeDestory的時候銷毀。
beforeDestroy () {
bus.$off('get', ()=>{})
}以上就是vue2使用eventbus踩坑解決的詳細(xì)內(nèi)容，更多關(guān)于vue2 eventbus踩坑的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
ant design vue動態(tài)循環(huán)生成表單以及自定義校驗規(guī)則詳解
這篇文章主要介紹了ant design vue動態(tài)循環(huán)生成表單以及自定義校驗規(guī)則詳解,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
解決VUEX刷新的時候出現(xiàn)數(shù)據(jù)消失
這篇文章主要介紹了解決VUEX刷新的時候出現(xiàn)數(shù)據(jù)消失,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)文章點贊和差評功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本文主要介紹了vue3中使用jsx的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了Vue 實現(xiàn)從小到大的橫向滑動效果,結(jié)合實例形式詳細(xì)分析了vue.js橫向漸變滑動效果的實現(xiàn)步驟、相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-10-10
有關(guān)vue 組件切換,動態(tài)組件,組件緩存
這篇文章主要介紹了有關(guān)vue 組件切換,動態(tài)組件,組件緩存，在組件化開發(fā)模式下，我們會把整個項目拆分成很多組件，然后按照合理的方式組織起來,達(dá)到預(yù)期效果，下面來看看文章的詳細(xì)內(nèi)容2021-11-11
vue mixins組件復(fù)用的幾種方式（小結(jié)）
這篇文章主要介紹了vue mixins組件復(fù)用的幾種方式（小結(jié)）,vue中提供了一種混合機(jī)制mixins，用來更高效的實現(xiàn)組件內(nèi)容的復(fù)用,有興趣的可以了解一下2017-09-09
這篇文章主要介紹了在vue中高德地圖引入和軌跡的繪制的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了Vue源碼探究之虛擬節(jié)點的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
VUE 實現(xiàn)動態(tài)給對象增加屬性，并觸發(fā)視圖更新操作示例
這篇文章主要介紹了VUE 實現(xiàn)動態(tài)給對象增加屬性，并觸發(fā)視圖更新操作,涉及vue.js對象屬性動態(tài)操作及視圖更新相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-11-11