vue采用EventBus實現跨組件通信及注意事項

Panda 發布于2019-08-22 18:04 / 2701人閱讀

摘要：掛載到添加文件第一個參數是事件對象，第二個參數是接收到消息信息，可以是任意類型事件訂閱監聽當前實例上的自定義事件。取消事件訂閱，移除自定義事件監聽器。

EventBus

EventBus是一種發布/訂閱事件設計模式的實踐。
在vue中適用于跨組件簡單通信，不適應用于復雜場景多組件高頻率通信，類似購物車等場景狀態管理建議采用vuex。

掛載EventBus到vue.prototype

添加bus.js文件
//src/service/bus.js

export default (Vue) => {
  const eventHub = new Vue()
  Vue.prototype.$bus = {
  /**
   * @param {any} event 第一個參數是事件對象，第二個參數是接收到消息信息，可以是任意類型
   * @method $on  事件訂閱, 監聽當前實例上的自定義事件。https://cn.vuejs.org/v2/api/#vm-on
   * @method $off  取消事件訂閱，移除自定義事件監聽器。  https://cn.vuejs.org/v2/api/#vm-off  https://github.com/vuejs/vue/issues/3399
   * @method $emit  事件廣播, 觸發當前實例上的事件。 https://cn.vuejs.org/v2/api/#vm-emit
   * @method $once  事件訂閱, 監聽一個自定義事件，但是只觸發一次，在第一次觸發之后移除監聽器。 https://cn.vuejs.org/v2/api/#vm-once
   */
    $on (...event) {
      eventHub.$on(...event)
    },
    $off (...event) {
      eventHub.$off(...event)
    },
    $once (...event) {
      eventHub.$once(...event)
    },
    $emit (...event) {
      eventHub.$emit(...event)
    }
  }
}

注冊
//main.js

import BUS from "./service/bus"
BUS(Vue)

注意事項

事件訂閱($on)必須在事件廣播($emit)前注冊；

取消事件訂閱($off)必須跟事件訂閱($on)成對出現。

使用場景

跨路由組件使用eventbus通信
假設a路由跳轉b路由需要通過eventbus通信，先觀察路由跳轉前后a,b組件的生命周期鉤子函數，可以發現兩者是交叉執行的。
由于事件訂閱必須在事件廣播前注冊，所以事件訂閱可以放在b組件beforeCreate,created,beforeMout鉤子函數中，而事件廣播可以放在a組件的beforeDestroy,destroyed中。
取消事件訂閱必須跟事件訂閱成對出現，否則會重復訂閱，對javascript性能造成不必要的浪費。因此B組件銷毀前需取消當前事件訂閱。

A組件

    beforeDestroy () {
    //事件廣播
      this.$bus.$emit("testing", color)
    }

B組件

    created () {
    //事件訂閱
      this.$bus.$on("testing", (res) => { console.log(res) })
    },
    beforeDestroy () {
      this.$bus.$off("testing")
    }

2.普通跨組件通信：由于兩組件幾乎同時加載，因此建議事件廣播放在created鉤子內，事件訂閱放在mouted中即可。具體使用場景建議在兩組件分別打印生命鉤子函數進行準確判斷。

  beforeCreate: function () {
    console.group("A組件 beforeCreate 創建前狀態===============》")
  },
  created: function () {
    console.group("A組件 created 創建完畢狀態===============》")
  },
  beforeMount: function () {
    console.group("x組件 beforeMount 掛載前狀態===============》")
  },
  mounted: function () {
    console.group("x組件 mounted 掛載結束狀態===============》")
  },
  beforeUpdate: function () {
    console.group("x組件 beforeUpdate 更新前狀態===============》")
  },
  updated: function () {
    console.group("x組件 updated 更新完成狀態===============》")
  },
  beforeDestroy: function () {
    console.group("x組件 beforeDestroy 銷毀前狀態===============》")
  },
  destroyed: function () {
    console.group("x組件 destroyed 銷毀完成狀態===============》")
  }

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95459.html

vue中8種組件通信方式, 值得收藏!

摘要：一父組件通過的方式向子組件傳遞數據，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。之前寫了一篇關于vue面試總結的文章, 有不少網友提出組件之間通信方式還有很多, 這篇文章便是專門總結組件之間通信的 vue是數據驅動視圖更新的框架, 所以對于vue來說組件間的數據通信非常重要，那么組件之間如何進行數據通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

BicycleWarrior 2019-08-26 10:44 評論0 收藏0
VUE前端工程化（一）（掌握組件的多種通信及數據同步）

摘要：是一個事件，它向下傳播到當前實例的所有后代。由于后代擴展為多個子樹，事件傳播將會遵循許多不同的路徑。組件修改實現遞歸地在父鏈上傳播事件。組件通信父子組件通信父傳子 props屬性子傳父 $emit事件這兩種官方文檔里有很詳細的介紹就不解釋了還是舉個栗子： //parent.vue父組件 parent: {{money}} ...

Tony_Zby 2019-08-26 14:05 評論0 收藏0
Vue動態加載異步組件

摘要：目前采用動態加載異步組件的方式來實現小組件之間的通信。內容使用過的都應該知道的動態加載組件通過來綁定需要加載的組件。總結本篇主要借助的動態組件和打包單文件來實現動態加載異步組件，通過的事件總線掛載在上來實現平級組件之間的通信。背景：目前我們項目都是按組件劃分的，然后各個組件之間封裝成產品。目前都是采用iframe直接嵌套頁面。項目中我們還是會碰到一些通用的組件跟業務之間有通信，這種...

awesome23 2019-08-26 13:22 評論0 收藏0
實現一個發布訂閱

摘要：表示事件類型回調函數，當監聽的事件類型觸發時，執行函數冒泡還是捕獲等參數原生中，我們通過注冊事件訂閱，比如鼠標點擊，傳入回調函數在注冊的事件觸發時要執行的函數，那么鼠標點擊時發布，傳入的回調函數就會執行。在常用的MVVM框架比如vue，組件間通信可能會有以下三種情況： 1. 父子通信：通過props 2. 非父子組件組件用eventBus通信 3. 如果項目很大，數據需要共享到多個組...

Aceyclee 2019-08-22 16:09 評論0 收藏0
前端面試匯總VUE(二)

摘要：采用了新舊的對比，獲取差異的，最后一次性的更新到真實上。對基本屬性進行監聽對對象進行監聽對對象某一個屬性監聽監聽自定義指令全局指令，第一個參數是指令名，第二個參數是一個對象，對象內部有個的函數，函數里有這個參數，表示綁定了這個指令的元素。 11.vue 虛擬DOM的理解 Web界面由DOM樹(樹的意思是數據結構)來構建，當其中一部分發生變化時，其實就是對應某個DOM節點發生了變化，??...

Sanchi 2019-08-23 18:29 評論0 收藏0