Vue EventBus傳值的bug(EventBus踩坑)

前言

三個兄弟組件通信

EventBus未取消綁定,重復觸發的bug

基本使用

/新建一個 js 文件，寫下如下代碼就創建好了一個 eventbus，沒錯，就是這么簡單
import Vue from 'vue'

export default new Vue;

全局調用

在 main.js 中導入 eventbus ，然后將它掛載到 vue 的原型上，這樣就可以全局調用了

import bus from './utils/eventBus'
Vue.prototype.bus = bus;

其他文件

//發送
this.bus.$emit(this.$route.path);

//接收
this.bus.$on(this.$route.path,()=>{
  this.getData();
})

//銷毀
beforeDestroy() {
  //組件銷毀前需要解綁事件。否則會出現重復觸發事件的問題
  this.bus.$off(this.$route.path);
},

簡單調用

import bus from './utils/eventBus'

//發送
bus.$emit('get', {
  item: item.type,
  date: date
})

//接收
bus.$on('get', this.myhandle)

//銷毀
beforeDestroy() {
  //組件銷毀前需要解綁事件。否則會出現重復觸發事件的問題
  bus.$off('get');
},

尤大大提出了以下解決

// 在B組件頁面中添加以下語句，在組件beforeDestory的時候銷毀。
beforeDestroy () {
  bus.$off('get', this.myhandle)
},

如果想要用bus 來進行頁面組件之間的數據傳遞，需要注意亮點，組件A$emit事件應在beforeDestory生命周期內。其次，組件B內的$on記得要銷毀。

處理經驗

1:雖然尤大大解決方案能銷毀$on,但是多個eventbus,處理不慎,容易導致事件不能再次觸發;

2:多個eventbus,多個組件實時交互,處理邏輯復雜;

3:彈窗還有其他邏輯交流,多功能組件不適合使用eventbus,需要利用vuex實時交互;

4:維護困難

5:除非非常簡單邏輯,否則不建議使用eventbus

Vue EventBus傳值的bug(EventBus踩坑)