前言

vue組件非常常見的有父子組件通信，兄弟組件通信。而父子組件通信就很簡單，父組件會通過 props 向下傳數(shù)據(jù)給子組件，當子組件有事情要告訴父組件時會通過 $emit 事件告訴父組件。而兩個毫不相關的界面通訊我們又可以用到vuex和今天要說的eventbus，本文就對eventbus使用時遇到的問題以及怎么處理做說明，至于怎么使用就不過多贅述了。

問題1： 頁面A使用emit為什么第一次進入B的時候頁面B中的on事件沒有被觸發(fā)

??這就涉及到vue的生命周期問題了，如果A的emit方法寫在了跳轉(zhuǎn)方法里這時候B界面其實還沒有創(chuàng)建，這時候通知是觸發(fā)不了B的on事件。至于怎么解決問題，其實看下面的圖片大家就清楚了。

image.png

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

A界面

// 跳轉(zhuǎn)界面的方法
  editList (index, date, item) {
    //  點擊進入編輯的頁面，需要傳遞的參數(shù)比較多。
      this.$router.replace({path: '/B'})
   }
// bus通知的方法
   beforeDestroy () {
      bus.$emit('get', { name:'A'})
   }

B界面

// bus通知的方法
   create() {
      bus.$on('get', (data)=>{
          
      })
   }

這個問題就解決了

問題2： 為什么后面再一次依次去觸發(fā)的時候會出現(xiàn)，每一次都會發(fā)現(xiàn)好像之前的on事件分發(fā)都沒有被撤銷一樣，導致每一次的事件觸發(fā)執(zhí)行越來越多。

??這就是因為bus的on事件是不會自動清楚銷毀的，需要我們手動來銷毀。

// 在B組件頁面中添加以下語句，在組件beforeDestory的時候銷毀。
  beforeDestroy () {
    bus.$off('get', ()=>{})
  }