vue中的$EventBus.$emit、$on 遇到的問題

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

　　在一個選項卡功能的頁面，出現的問題是，當點擊選項卡的某個選項時，會同時加載整個選項卡的數據，自己產品就很大，數據不少，因此這個問題沒法忽略；web

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

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-22ui

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

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

　　在一個選項卡功能的頁面，出現的問題是，當點擊選項卡的某個選項時，會同時加載整個選項卡的數據，自己產品就很大，數據不少，因此這個問題沒法忽略；code

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>

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

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

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