摘要：主要是看這是從上個(gè)頁(yè)面?zhèn)鱽?lái)的數(shù)據(jù)這一行數(shù)據(jù)的輸出次數(shù)情況來(lái)判斷事件觸發(fā)次數(shù)。總結(jié)所以，如果想要用來(lái)進(jìn)行頁(yè)面組件之間的數(shù)據(jù)傳遞，需要注意亮點(diǎn)，組件事件應(yīng)在生命周期內(nèi)。其次，組件內(nèi)的記得要銷(xiāo)毀。

轉(zhuǎn)載于簡(jiǎn)書(shū) 原文鏈接：https://www.jianshu.com/p/fde...
一開(kāi)始的需求是這樣子的，我為了實(shí)現(xiàn)兩個(gè)頁(yè)面組件之間的數(shù)據(jù)傳遞，假設(shè)我有頁(yè)面A，點(diǎn)擊頁(yè)面A上的某一個(gè)按鈕之后，頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)到頁(yè)面B，同時(shí)我希望將頁(yè)面A上的某一些參數(shù)攜帶過(guò)去給頁(yè)面B。（我知道，小參數(shù)的時(shí)候可以通過(guò)路由的params或者query去傳參數(shù)，或者大型數(shù)據(jù)可以用vuex來(lái)處理，很遺憾我到現(xiàn)在還沒(méi)有做很大型的項(xiàng)目，所以還沒(méi)有用過(guò)vuex，接下來(lái)會(huì)學(xué)習(xí)一下。）
然后我就想，這不就是不同組件之間的數(shù)據(jù)傳遞問(wèn)題而已嗎？直接用bus
巴士事件來(lái)傳遞數(shù)據(jù)不就行了嗎。于是，我就很愉快地進(jìn)行了。關(guān)于vue中的eventbus的使用，我之前在一篇vue中的數(shù)據(jù)傳遞中有提到過(guò)。 。
先給你們看一下我一開(kāi)始的代碼：
實(shí)現(xiàn)目標(biāo)：  點(diǎn)擊之后，bus emit事件，然后順便跳轉(zhuǎn)路由到/moneyRecord頁(yè)面。
接下來(lái)就是在MoneyRecord頁(yè)面中去on接收這個(gè)事件，然后接受參數(shù)。 // 這是頁(yè)面A的內(nèi)部觸發(fā)bus事件的代碼

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

// moneyRecord頁(yè)面
created () {
    //這里我將icon的list給保存下來(lái)了
    bus.$on("get", this.myhandle)
  },
methods: {
  myhandle (val) {
      console.log(val, "這是從上個(gè)頁(yè)面?zhèn)鬟f過(guò)來(lái)的參數(shù)")
    }
}

就當(dāng)我欣喜若狂的時(shí)候，覺(jué)得自己只要在頁(yè)面A觸發(fā)了get事件，頁(yè)面B中就會(huì)理所當(dāng)然的接受了數(shù)據(jù)。然而，結(jié)果卻不如人意，看一下下面的動(dòng)圖。
主要是看“”這是從上個(gè)頁(yè)面?zhèn)鱽?lái)的數(shù)據(jù)這一行數(shù)據(jù)的輸出次數(shù)情況來(lái)判斷事件觸發(fā)次數(shù)。“”
test.gif
不知道你有沒(méi)有發(fā)現(xiàn)，就是我第一次進(jìn)去list頁(yè)面的時(shí)候，我隨便點(diǎn)擊一下list下的任何一個(gè)item，控制臺(tái)沒(méi)有輸出。但是當(dāng)我第二次再點(diǎn)擊觸發(fā)事件的時(shí)候，就會(huì)輸出一個(gè)測(cè)試數(shù)據(jù)。再一次進(jìn)去點(diǎn)擊，就輸出兩個(gè)數(shù)據(jù)。。。依次增加了。（控制臺(tái)上那個(gè)“這是從上個(gè)頁(yè)面?zhèn)鱽?lái)的數(shù)據(jù)”就是測(cè)試數(shù)據(jù)）
所以，有兩個(gè)問(wèn)題。
問(wèn)題：
問(wèn)題1： 為什么第一次觸發(fā)的時(shí)候頁(yè)面B中的on事件沒(méi)有被觸發(fā) 問(wèn)題2：
為什么后面再一次依次去觸發(fā)的時(shí)候會(huì)出現(xiàn)，每一次都會(huì)發(fā)現(xiàn)好像之前的on事件分發(fā)都沒(méi)有被撤銷(xiāo)一樣，導(dǎo)致每一次的事件觸發(fā)執(zhí)行越來(lái)越多。 解決
針對(duì)問(wèn)題1
這個(gè)還得從vue的生命周期說(shuō)起了，我先進(jìn)行了測(cè)試，就是當(dāng)從頁(yè)面組件A跳轉(zhuǎn)到頁(yè)面組件B的時(shí)候，兩個(gè)組件的生命周期分別是怎么樣的，關(guān)于vue的生命周期具體每一個(gè)時(shí)期做什么事情我就不再贅述了，下面po一張vue生命周期的圖。
image.png 我自己做了實(shí)驗(yàn)來(lái)驗(yàn)證，這個(gè)頁(yè)面跳轉(zhuǎn)過(guò)程中，這兩個(gè)組件的生命周期的執(zhí)行情況。

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

// 另外一個(gè)組件的我就不放出來(lái)了

測(cè)試結(jié)果圖：

test.gif
image.png
其實(shí)，可以通過(guò)結(jié)果清楚看到，當(dāng)我們還在頁(yè)面A的時(shí)候，頁(yè)面B還沒(méi)生成，也就是頁(yè)面B中的 created中所監(jiān)聽(tīng)的來(lái)自于A中的事件還沒(méi)有被觸發(fā)。這個(gè)時(shí)候當(dāng)你A中emit事件的時(shí)候，B其實(shí)是沒(méi)有監(jiān)聽(tīng)到的。

再看一下，紅色的是B頁(yè)面組件，當(dāng)你從頁(yè)面A到頁(yè)面B跳轉(zhuǎn)的時(shí)候，發(fā)生了什么？首先是先B組件先created然后beforeMount接著A組件才被銷(xiāo)毀，A組件才執(zhí)行beforeDestory，以及destoryed.

所以，我們可以把A頁(yè)面組件中的emit事件寫(xiě)在beforeDestory中去。因?yàn)檫@個(gè)時(shí)候，B頁(yè)面組件已經(jīng)被created了，也就是我們寫(xiě)的$on事件已經(jīng)觸發(fā)了

所以可以，在beforeDestory的時(shí)候，$emit事件。

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

然后：

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

接下來(lái)。看一下修改之后的效果
test.gif
可以看到，就是第一次點(diǎn)擊list的時(shí)候，也就是第一次觸發(fā)emit事件的時(shí)候，控制太就輸出了，所以在beforeDestoryed去$emit是起到作用的，B頁(yè)面組件也監(jiān)聽(tīng)$on到了。
但是，好像，就是事件的觸發(fā)還是會(huì)依次增加，就是控制臺(tái)的輸出每次都有所增加了。。。
解決： 看一下github上提出的。issue https://github.com/vuejs/vue/...
image.png 尤大大提出了以下解決：
image.png
就是說(shuō)，這個(gè)$on事件是不會(huì)自動(dòng)清楚銷(xiāo)毀的，需要我們手動(dòng)來(lái)銷(xiāo)毀。（不過(guò)我不太清楚這里的external bus 是什么意思，有大神能解答一下的嗎，尤大大也提到如果是注冊(cè)的是external bus 的時(shí)候需要清除）*
所以。我在B組件頁(yè)面中添加Bus.$off來(lái)關(guān)閉。代碼如下：

// 在B組件頁(yè)面中添加以下語(yǔ)句，在組件beforeDestory的時(shí)候銷(xiāo)毀。

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

來(lái)看一下輸出的結(jié)果
t可以看到，控制臺(tái)第一次進(jìn)去的時(shí)候就有輸出，而且輸出的不會(huì)逐次增加
*當(dāng)然，尤大大還說(shuō)可以寫(xiě)一個(gè)mixin？我還不知道是什么？以后在研究一下。
總結(jié)： 所以，如果想要用bus
來(lái)進(jìn)行頁(yè)面組件之間的數(shù)據(jù)傳遞，需要注意亮點(diǎn)，組件A$emit事件應(yīng)在beforeDestory生命周期內(nèi)。其次，組件B內(nèi)的$on記得要銷(xiāo)毀。
提問(wèn)時(shí)間：你們?cè)趯?shí)現(xiàn)頁(yè)面組件之間的數(shù)據(jù)傳遞有什么好的方法嗎？可以留言分享一下嗎？有時(shí)候雖然也可以通過(guò)從后臺(tái)獲取，但是考慮到數(shù)據(jù)只有幾個(gè)需要傳的話，就沒(méi)有必要去請(qǐng)求數(shù)據(jù)，我知道有的還有用vueX傳遞。還有呢？
作者：Katherine的小世界 鏈接：https://www.jianshu.com/p/fde... 來(lái)源：簡(jiǎn)書(shū)