vue非父子組件通信中eventbus被多次觸發（vue中使用eventbus踩過的坑）

CHENGKANG 發布于2019-08-22 16:29 / 3151人閱讀

摘要：主要是看這是從上個頁面傳來的數據這一行數據的輸出次數情況來判斷事件觸發次數。總結所以，如果想要用來進行頁面組件之間的數據傳遞，需要注意亮點，組件事件應在生命周期內。其次，組件內的記得要銷毀。

轉載于簡書原文鏈接：https://www.jianshu.com/p/fde...

一開始的需求是這樣子的，我為了實現兩個頁面組件之間的數據傳遞，假設我有頁面A，點擊頁面A上的某一個按鈕之后，頁面會自動跳轉到頁面B，同時我希望將頁面A上的某一些參數攜帶過去給頁面B。（我知道，小參數的時候可以通過路由的params或者query去傳參數，或者大型數據可以用vuex來處理，很遺憾我到現在還沒有做很大型的項目，所以還沒有用過vuex，接下來會學習一下。）

然后我就想，這不就是不同組件之間的數據傳遞問題而已嗎？直接用bus
巴士事件來傳遞數據不就行了嗎。于是，我就很愉快地進行了。關于vue中的eventbus的使用，我之前在一篇vue中的數據傳遞中有提到過。。

先給你們看一下我一開始的代碼：

實現目標：點擊之后，bus emit事件，然后順便跳轉路由到/moneyRecord頁面。
接下來就是在MoneyRecord頁面中去on接收這個事件，然后接受參數。 // 這是頁面A的內部觸發bus事件的代碼

 editList (index, date, item) {
//  點擊進入編輯的頁面，需要傳遞的參數比較多。
  console.log(index, date, item)
  bus.$emit("get", {
    item: item.type,
    date: date
  })
  this.$router.replace({path: "/moneyRecord"})
}

// moneyRecord頁面
created () {
    //這里我將icon的list給保存下來了
    bus.$on("get", this.myhandle)
  },
methods: {
  myhandle (val) {
      console.log(val, "這是從上個頁面傳遞過來的參數")
    }
}

就當我欣喜若狂的時候，覺得自己只要在頁面A觸發了get事件，頁面B中就會理所當然的接受了數據。然而，結果卻不如人意，看一下下面的動圖。

主要是看“”這是從上個頁面傳來的數據這一行數據的輸出次數情況來判斷事件觸發次數。“”

test.gif
不知道你有沒有發現，就是我第一次進去list頁面的時候，我隨便點擊一下list下的任何一個item，控制臺沒有輸出。但是當我第二次再點擊觸發事件的時候，就會輸出一個測試數據。再一次進去點擊，就輸出兩個數據。。。依次增加了。（控制臺上那個“這是從上個頁面傳來的數據”就是測試數據）

所以，有兩個問題。

問題：

問題1：為什么第一次觸發的時候頁面B中的on事件沒有被觸發問題2：
為什么后面再一次依次去觸發的時候會出現，每一次都會發現好像之前的on事件分發都沒有被撤銷一樣，導致每一次的事件觸發執行越來越多。解決

針對問題1
這個還得從vue的生命周期說起了，我先進行了測試，就是當從頁面組件A跳轉到頁面組件B的時候，兩個組件的生命周期分別是怎么樣的，關于vue的生命周期具體每一個時期做什么事情我就不再贅述了，下面po一張vue生命周期的圖。

image.png 我自己做了實驗來驗證，這個頁面跳轉過程中，這兩個組件的生命周期的執行情況。

// 我分別在頁面A和頁面B中去添加以下代碼：
beforeCreate () {
   console.group("%c%s", "color:red", "beforeCreate 創建前狀態===============組件2》")
 },
 created () {
   console.group("%c%s", "color:red", "created 創建完畢狀態===============組件2》")
 },
 beforeMount () {
   console.group("%c%s", "color:red", "beforeMount 掛載前狀態===============組件2》")
 },
 mounted () {
   console.group("%c%s", "color:red", "mounted 掛載狀態===============組件2》")
 },
 beforeUpdate () {
   console.group("%c%s", "color:red", "beforeUpdate 更新前狀態===============組件2》")
 },
 updated () {
   console.group("%c%s", "color:red", "updated 更新狀態===============組件2》")
 },
 beforeDestroy () {
   console.group("%c%s", "color:red", "beforeDestroy 破前狀態===============組件2》")
 },
 destroyed () {
   console.group("%c%s", "color:red", "destroyed 破壞狀態===============組件2》")
 }

// 另外一個組件的我就不放出來了

測試結果圖：

test.gif
image.png
其實，可以通過結果清楚看到，當我們還在頁面A的時候，頁面B還沒生成，也就是頁面B中的 created中所監聽的來自于A中的事件還沒有被觸發。這個時候當你A中emit事件的時候，B其實是沒有監聽到的。

再看一下，紅色的是B頁面組件，當你從頁面A到頁面B跳轉的時候，發生了什么？首先是先B組件先created然后beforeMount接著A組件才被銷毀，A組件才執行beforeDestory，以及destoryed.

所以，我們可以把A頁面組件中的emit事件寫在beforeDestory中去。因為這個時候，B頁面組件已經被created了，也就是我們寫的$on事件已經觸發了

所以可以，在beforeDestory的時候，$emit事件。

// 修改一下A頁面中的代碼：
// 這是原先的代碼
  editList (index, date, item) {
//  點擊進入編輯的頁面，需要傳遞的參數比較多。
      console.log(index, date, item)
      this.item = item.type
      this.date = date
      this.$router.replace({path: "/moneyRecord"})
    }
// 重新在data屬性內部定義新的變量，來存儲要傳過去的數據；

然后：

beforeDestroy () {
 console.log(this.highlight, "這是今年的數據", this, "看看組件銷毀之前會發生什么")
 bus.$emit("get", {
        item: this.item,
        date: this.date
      })
 },

接下來。看一下修改之后的效果

test.gif
可以看到，就是第一次點擊list的時候，也就是第一次觸發emit事件的時候，控制太就輸出了，所以在beforeDestoryed去$emit是起到作用的，B頁面組件也監聽$on到了。

但是，好像，就是事件的觸發還是會依次增加，就是控制臺的輸出每次都有所增加了。。。

解決：看一下github上提出的。issue https://github.com/vuejs/vue/...

image.png 尤大大提出了以下解決：

image.png
就是說，這個$on事件是不會自動清楚銷毀的，需要我們手動來銷毀。（不過我不太清楚這里的external bus 是什么意思，有大神能解答一下的嗎，尤大大也提到如果是注冊的是external bus 的時候需要清除）*

所以。我在B組件頁面中添加Bus.$off來關閉。代碼如下：

// 在B組件頁面中添加以下語句，在組件beforeDestory的時候銷毀。

  beforeDestroy () {
    bus.$off("get", this.myhandle)
  },

來看一下輸出的結果

t可以看到，控制臺第一次進去的時候就有輸出，而且輸出的不會逐次增加
*當然，尤大大還說可以寫一個mixin？我還不知道是什么？以后在研究一下。

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

提問時間：你們在實現頁面組件之間的數據傳遞有什么好的方法嗎？可以留言分享一下嗎？有時候雖然也可以通過從后臺獲取，但是考慮到數據只有幾個需要傳的話，就沒有必要去請求數據，我知道有的還有用vueX傳遞。還有呢？

作者：Katherine的小世界鏈接：https://www.jianshu.com/p/fde... 來源：簡書

云服務器 GPU云服務器 vue父子組件通訊云服務器踩過的坑 vue 中使用 webrtc vue中使用webrtc

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

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

vue數據傳遞--我有特殊的實現技巧

摘要：同時有一種特殊的實現方案。組件之間傳值有這么幾種數據傳遞方式，和特殊的。在所有實例中使用其進行數據的通信。雙多方使用同名事件進行溝通。數據非長效數據，無法保存，只在后生效。這樣約定的好處是，我們能夠記錄所有中發生的改變。前言最近碰到了比較多的關于vue的eventBus的問題，之前定技術選型的時候也被問到了，vuex和eventBus的使用范圍。所以簡單的寫一下。同時有一種特殊的實...

xiaoxiaozi 2019-08-26 17:04 評論0 收藏0
整理4種Vue組件通信方式

摘要：整理種組件通信方式重點是梳理了前兩個父子組件通信和通信我覺得文檔里的說明還是有一些簡易我自己第一遍是沒看明白。第四種通信方式利用比較復雜可以單獨寫一篇整理4種Vue組件通信方式重點是梳理了前兩個,父子組件通信和eventBus通信,我覺得Vue文檔里的說明還是有一些簡易,我自己第一遍是沒看明白。父子組件的通信非父子組件的eventBus通信利用本地緩存實現組件通信 Vuex...

MingjunYang 2019-08-26 11:38 評論0 收藏0
vue中8種組件通信方式, 值得收藏!

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

BicycleWarrior 2019-08-26 10:44 評論0 收藏0
vue -- 非父子組件傳值，事件總線（eventbus）的使用方式

摘要：我的個人博客地址資源地址非父子組件傳值，事件總線的使用方式我的博客地址如果您對我的博客內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。歡迎訪問我的個人博客：http://www.xiaolongwu.cn 前言先說一下什么是事件總線，其實就是訂閱發布者模式；比如有一個bus對象，這個對象上有兩個方法，一個是on（監聽，也就是訂閱），一個是emit（觸發，也就...

zone 2019-08-23 14:37 評論0 收藏0
前端面試匯總VUE(二)

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

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