成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue采用EventBus實現(xiàn)跨組件通信及注意事項

Panda / 2735人閱讀

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

EventBus

EventBus是一種發(fā)布/訂閱事件設(shè)計模式的實踐。
在vue中適用于跨組件簡單通信，不適應(yīng)用于復(fù)雜場景多組件高頻率通信，類似購物車等場景狀態(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 第一個參數(shù)是事件對象，第二個參數(shù)是接收到消息信息，可以是任意類型
   * @method $on  事件訂閱, 監(jiān)聽當前實例上的自定義事件。https://cn.vuejs.org/v2/api/#vm-on
   * @method $off  取消事件訂閱，移除自定義事件監(jiān)聽器。  https://cn.vuejs.org/v2/api/#vm-off  https://github.com/vuejs/vue/issues/3399
   * @method $emit  事件廣播, 觸發(fā)當前實例上的事件。 https://cn.vuejs.org/v2/api/#vm-emit
   * @method $once  事件訂閱, 監(jiān)聽一個自定義事件，但是只觸發(fā)一次，在第一次觸發(fā)之后移除監(jiān)聽器。 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)成對出現(xiàn)。

使用場景

跨路由組件使用eventbus通信
假設(shè)a路由跳轉(zhuǎn)b路由需要通過eventbus通信，先觀察路由跳轉(zhuǎn)前后a,b組件的生命周期鉤子函數(shù)，可以發(fā)現(xiàn)兩者是交叉執(zhí)行的。
由于事件訂閱必須在事件廣播前注冊，所以事件訂閱可以放在b組件beforeCreate,created,beforeMout鉤子函數(shù)中，而事件廣播可以放在a組件的beforeDestroy,destroyed中。
取消事件訂閱必須跟事件訂閱成對出現(xiàn)，否則會重復(fù)訂閱，對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鉤子內(nèi)，事件訂閱放在mouted中即可。具體使用場景建議在兩組件分別打印生命鉤子函數(shù)進行準確判斷。

  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 銷毀前狀態(tài)===============》")
  },
  destroyed: function () {
    console.group("x組件 destroyed 銷毀完成狀態(tài)===============》")
  }

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95459.html

相關(guān)文章

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

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

    BicycleWarrior 評論0 收藏0

  • VUE前端工程化（ 一）（掌握組件的多種通信及數(shù)據(jù)同步）

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

    Tony_Zby 評論0 收藏0

  • Vue動態(tài)加載異步組件

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

    awesome23 評論0 收藏0

  • 實現(xiàn)一個發(fā)布訂閱

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

    Aceyclee 評論0 收藏0

  • 前端面試匯總VUE(二)

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

    Sanchi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<