vue采用EventBus實(shí)現(xiàn)跨組件通信及注意事項(xiàng)小結(jié)

更新時(shí)間：2018年06月14日 16:16:03 作者：菠蘿油王子

EventBus是一種發(fā)布/訂閱事件設(shè)計(jì)模式的實(shí)踐。這篇文章主要介紹了vue采用EventBus實(shí)現(xiàn)跨組件通信及注意事項(xiàng),需要的朋友可以參考下

EventBus

EventBus是一種發(fā)布/訂閱事件設(shè)計(jì)模式的實(shí)踐。

在vue中適用于跨組件簡(jiǎn)單通信，不適應(yīng)用于復(fù)雜場(chǎng)景多組件高頻率通信，類(lèi)似購(gòu)物車(chē)等場(chǎng)景狀態(tài)管理建議采用vuex。

掛載EventBus到vue.prototype

添加bus.js文件

//src/service/bus.js
export default (Vue) => {
 const eventHub = new Vue()
 Vue.prototype.$bus = {
 /**
  * @param {any} event 第一個(gè)參數(shù)是事件對(duì)象，第二個(gè)參數(shù)是接收到消息信息，可以是任意類(lèi)型
  * @method $on 事件訂閱, 監(jiān)聽(tīng)當(dāng)前實(shí)例上的自定義事件。https://cn.vuejs.org/v2/api/#vm-on
  * @method $off 取消事件訂閱，移除自定義事件監(jiān)聽(tīng)器。 https://cn.vuejs.org/v2/api/#vm-off https://github.com/vuejs/vue/issues/3399
  * @method $emit 事件廣播, 觸發(fā)當(dāng)前實(shí)例上的事件。 https://cn.vuejs.org/v2/api/#vm-emit
  * @method $once 事件訂閱, 監(jiān)聽(tīng)一個(gè)自定義事件，但是只觸發(fā)一次，在第一次觸發(fā)之后移除監(jiān)聽(tīng)器。 https://cn.vuejs.org/v2/api/#vm-once
  */
  $on (...event) {
   eventHub.$on(...event)
  },
  $off (...event) {
   eventHub.$off(...event)
  },
  $once (...event) {
   eventHub.$emit(...event)
  },
  $emit (...event) {
   eventHub.$emit(...event)
  }
 }
}
注冊(cè)
//main.js
import BUS from './service/bus'
BUS(Vue)

注意事項(xiàng)

事件訂閱必須在事件廣播前注冊(cè)；
取消事件訂閱必須跟事件訂閱成對(duì)出現(xiàn)。

使用場(chǎng)景

1.跨路由組件使用eventbus通信

假設(shè)a路由跳轉(zhuǎn)b路由需要通過(guò)eventbus通信，先觀察路由跳轉(zhuǎn)前后a,b組件的生命周期鉤子函數(shù)，可以發(fā)現(xiàn)兩者是交叉執(zhí)行的。

由于事件訂閱必須在事件廣播前注冊(cè)，所以事件訂閱可以放在b組件beforeCreate,created,beforeMout鉤子函數(shù)中，而事件廣播可以放在a組件的beforeDestroy,destroyed中。

取消事件訂閱必須跟事件訂閱成對(duì)出現(xiàn)，否則會(huì)重復(fù)訂閱，對(duì)javascript性能造成不必要的浪費(fèi)。因此B組件銷(xiāo)毀前需取消當(dāng)前事件訂閱。

A組件

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

B組件

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

2.普通跨組件通信：由于兩組件幾乎同時(shí)加載，因此建議事件廣播放在created鉤子內(nèi)，事件訂閱放在mouted中即可。具體使用場(chǎng)景建議在兩組件分別打印生命鉤子函數(shù)進(jìn)行準(zhǔn)確判斷。

 beforeCreate: function () {
  console.group('A組件 beforeCreate 創(chuàng)建前狀態(tài)===============》')
 },
 created: function () {
  console.group('A組件 created 創(chuàng)建完畢狀態(tài)===============》')
 },
 beforeMount: function () {
  console.group('x組件 beforeMount 掛載前狀態(tài)===============》')
 },
 mounted: function () {
  console.group('x組件 mounted 掛載結(jié)束狀態(tài)===============》')
 },
 beforeUpdate: function () {
  console.group('x組件 beforeUpdate 更新前狀態(tài)===============》')
 },
 updated: function () {
  console.group('x組件 updated 更新完成狀態(tài)===============》')
 },
 beforeDestroy: function () {
  console.group('x組件 beforeDestroy 銷(xiāo)毀前狀態(tài)===============》')
 },
 destroyed: function () {
  console.group('x組件 destroyed 銷(xiāo)毀完成狀態(tài)===============》')
 }

總結(jié)

以上所述是小編給大家介紹的vue采用EventBus實(shí)現(xiàn)跨組件通信及注意事項(xiàng)小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: