vue中的$EventBus.$emit、$on的應用

今天在項目中遇到的一個需求：

　　在一個選項卡功能的頁面，出現的問題是，當點擊選項卡的某個選項時，會同時加載整個選項卡的數據，本身產品就很大，數據很多，所以這個問題無法忽略；

仔細研究下發現，當剛進入頁面時，只會加載當前一個tab的數據，這樣是正常的，但當再次點擊別的tab時，之前tab的接口就都連帶着再次請求一邊，只要是不刷新頁面，就一直切換tab，一直會有前邊的tab數據接口重新請求，項目中tab實現是用的餓了么ui的tab選項卡，在研究了餓了么ui之后發現使用上沒有什么問題，而且是子組件的v-if切換

1     <el-tabs v-model="activeName" @tab-click="tabClick" class="assetsIndex">
2       <el-tab-pane label="IP地址" name="ip" class="assetsIndextitle">
3         <FlawIp v-if="ipShow" />
4       </el-tab-pane>
5       <el-tab-pane label="網站" name="web" class="assetsIndextitle">
6         <FlawWeb v-if="webShow" />　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　index文件
7       </el-tab-pane>
8     </el-tabs>

這樣的話，切換的時候直接就將dom節點刪除了，當時在網上搜的懷疑是dom節點刪除，但事件沒有移除，但后來看了下，之前沒有用過監聽，要是使用移除監聽應該不好辦，所以整理下了思路發現，子組件是用$on接受參數的$emit發送的值，$emit,$on存在的bug就是會將之前的值累加，所以，它會將之前接口再走一遍，可能小項目看不出來什么，但項目一旦大了，一個頁面就有好多接口，可能直接就崩了,所以，在接收參數之前一定要清楚下之前的值即可

1  this.$EventBus.$emit('nodeClick', {
2         id: 1　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　別的文件發送id這個參數
3       })

this.$EventBus.$off("nodeClick")

 this.$EventBus.$on("nodeClick", ({ id }) => {
      this.getAccount(id);　　　　　　　　　　　　　　　　　　　　　　　　　子組件接收參數
    });

 

 

2019-10-22

---恢復內容結束---

今天在項目中遇到的一個需求：

　　在一個選項卡功能的頁面，出現的問題是，當點擊選項卡的某個選項時，會同時加載整個選項卡的數據，本身產品就很大，數據很多，所以這個問題無法忽略；

仔細研究下發現，當剛進入頁面時，只會加載當前一個tab的數據，這樣是正常的，但當再次點擊別的tab時，之前tab的接口就都連帶着再次請求一邊，只要是不刷新頁面，就一直切換tab，一直會有前邊的tab數據接口重新請求，項目中tab實現是用的餓了么ui的tab選項卡，在研究了餓了么ui之后發現使用上沒有什么問題，而且是子組件的v-if切換

1     <el-tabs v-model="activeName" @tab-click="tabClick" class="assetsIndex">
2       <el-tab-pane label="IP地址" name="ip" class="assetsIndextitle">
3         <FlawIp v-if="ipShow" />
4       </el-tab-pane>
5       <el-tab-pane label="網站" name="web" class="assetsIndextitle">
6         <FlawWeb v-if="webShow" />　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　index文件
7       </el-tab-pane>
8     </el-tabs>

這樣的話，切換的時候直接就將dom節點刪除了，當時在網上搜的懷疑是dom節點刪除，但事件沒有移除，但后來看了下，之前沒有用過監聽，要是使用移除監聽應該不好辦，所以整理下了思路發現，子組件是用$on接受參數的$emit發送的值，$emit,$on存在的bug就是會將之前的值累加，所以，它會將之前接口再走一遍，可能小項目看不出來什么，但項目一旦大了，一個頁面就有好多接口，可能直接就崩了,所以，在接收參數之前一定要清楚下之前的值即可

1  this.$EventBus.$emit('nodeClick', {
2         id: 1　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　別的文件發送id這個參數
3       })

this.$EventBus.$off("nodeClick")

 this.$EventBus.$on("nodeClick", ({ id }) => {
      this.getAccount(id);　　　　　　　　　　　　　　　　　　　　　　　　　子組件接收參數
    });

轉：https://www.cnblogs.com/yanyanliu/p/11723324.html