今天在项目中遇到的一个需求：
在一个选项卡功能的页面，出现的问题是，当点击选项卡的某个选项时，会同时加载整个选项卡的数据，本身产品就很大，数据很多，所以这个问题无法忽略；
仔细研究下发现，当刚进入页面时，只会加载当前一个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); 子组件接收参数
});
