vue 兄弟組件間傳值（bus方式）的坑（重復觸發和首次未觸發）

場景：組件A header    組件B  頁面

點擊組件A，引起組件B表格數據的查詢

 

代碼實現

//標簽
<el-badge :value="examineNum" :max="99" class="item">
      <el-button @click="examineBtn()" size="small">未審核訂單</el-button>
</el-badge>


// A組件觸發事件
examineBtn() {
  this.$router.push({
    path: '/orderA',
    query: {
      dataType: 'allNoAudit'
    }
  });
  MsgBus.$emit('allNoAudit', this.clickNum++); //每次都讓值改變，保證每次點擊都會被接收
}

//B組件接收
MsgBus.$on('allNoAudit', (e) => {
  this.allNoAuditBOl = e;
　　　console.log('resize');
  this.resizeTable();
});
　

問題：

在點擊未審核按鈕時，

1.本頁面點擊，只會觸發一次

2.當涉及到頁面切換時，先在管理頁面，點擊‘未審核’按鈕進入審核頁面。重復幾次，會發現會多次打印'resize',具體是，每切換一次頁面，點擊按鈕的時候，就會多打印一次

對應上面情況。1是正常的，是我們想要的結果，2就是坑了

為什么會出現這種情況呢？按照上述情況，我的猜想是每次組件掛載后，點擊‘未審核按鈕’使用$emit都會建立的一個新的消息機制，而組件銷毀時這個消息機制一直未被銷毀。不停的切換頁面，會不斷的掛載和銷毀組件，如果每切換一次頁面就點一次按鈕，就會創建一個新的消息機制，不斷的創建而不銷毀，導致B組件接受事件里的操作重復觸發，控制台重復多次打印resize

 

解決辦法：

上面的邏輯想通了，解決的辦法就很簡單，在每次頁面銷毀前，去銷毀這個消息機制。

MsgBus.$off();

鐺鐺鐺鐺，重復解決了。

至於首次未觸發，主要還是頁面未創建的時候，按鈕已經發出了消息，頁面當然接收不到了，方法看代碼～我就不贅述了。。。

加油，everyone

//標簽
 <el-badge :value="examineNum" :max="99" class="item">
       <el-button @click="examineBtn()" size="small">未審核訂單</el-button>
 </el-badge>
 
 
 // A組件觸發事件
 examineBtn() {
   this.$router.push({
     path: '/orderA',
     query: {
       dataType: 'allNoAudit'
     }
   });
   //如果在訂單管理頁面，發出消息的時候未審核頁面還未被創建完成，無法接受消息就不會執行
  //這的東西主要是對鈎子函數的理解，想了解朋友以后可以來看看，下次更新
   setTimeout(()=>{                                        
           MsgBus.$emit('allNoAudit', this.clickNum++);  //每次都讓值改變，保證每次點擊都會被接收
   },200)        
 }
 
 //B組件接收
 beforeCreate() {                            //為了盡快收到消息，寫在鈎子函數最開始
     MsgBus.$on('allNoAudit', (e) => {
       this.allNoAuditBOl = e;　　console.log('resize');
       this.resizeTable();
     });
 },

　　　　beforeDestroy() {

　　　　　　MsgBus.$off();

　　　　}