vue之$eventBus非父子組件傳值使用解析

  • 在vue中,我們可以使用props和$emit進行父子組件的傳值,但是如果需要互相傳值的組件不是父子關系,這時我們使用props進行傳值就會非常麻煩,

  • 這個時候我們就可以用到$eventBus

聲明eventBus

  • 我們在js入口文件中給vue原型聲明一個$eventBus,他的值是一個不帶dom組件的vue實例

              Vue.prototype.$evnetBus = new Vue();

  • 這樣我們在一個組件創建時候進行一個事件監聽

              //在組件一中我們可以在created中進行監聽

              created(){    this.$eventBus.$on(      "  事件名 1"      ,      "事件處理函數1"    )    }

  • 觸發eventBus

              //在組件二中我們就可以在任意地方進行觸發

              this.$eventBus.$emit(  "  事件名1 "  ,    "  需要傳遞的參數1  "  )

    • 這樣我們組件一中的事件監聽被執行,傳遞的參數就收到了

    • eventBus使用起來很方便,但是如果不正確的使用,將會是一場災難,組件如果被循環得創建和銷毀,
      eventBus的監聽需要我們手動移除,不然因為外部的引用會一直存在,在后期被反復觸發,因此所有$evnetBut的監聽需要我們在組件銷毀時候將監聽進行移除

  • 我們可以在vue生命周期beforDestory中進行移除,因為我們上面再組件一的created中執行了監聽,我們同樣在組件一的beforDestory中寫入以下代碼保證在組件一在被銷毀時候移除監聽

  • 移除eventBus監聽

      beforDestory(){    this/$eventBus.off (    "事件名1"    )  }

  • 以上,我們就使用$eventBus進行了一個組件二給組件一傳值,并且組件一在銷毀時候移除監聽的完整操作

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。