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>
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<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文件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);                         子组件接收参数
    });

 

1  this.$EventBus.$emit('nodeClick', {
2         id: 1                                别的文件发送id这个参数
3       })

1 this.$EventBus.$emit(‘nodeClick’, {
2 id: 1                                别的文件发送id这个参数
3

this.$EventBus.$off("nodeClick")
 this.$EventBus.$on("nodeClick", ({ id }) => {
      this.getAccount(id);                         子组件接收参数
    });
this.$EventBus.$off("nodeClick")

this.$EventBus.$off(“nodeClick”)this.$EventBus.$off(“nodeClick”)

 this.$EventBus.$on("nodeClick", ({ id }) => {
      this.getAccount(id);                         子组件接收参数
    });

this {
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>
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<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文件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);                         子组件接收参数
    });
1  this.$EventBus.$emit('nodeClick', {
2         id: 1                                别的文件发送id这个参数
3       })

1 this.$EventBus.$emit(‘nodeClick’, {
2 id: 1                                别的文件发送id这个参数
3

this.$EventBus.$off("nodeClick")
 this.$EventBus.$on("nodeClick", ({ id }) => {
      this.getAccount(id);                         子组件接收参数
    });
this.$EventBus.$off("nodeClick")

this.$EventBus.$off(“nodeClick”)this.$EventBus.$off(“nodeClick”)

 this.$EventBus.$on("nodeClick", ({ id }) => {
      this.getAccount(id);                         子组件接收参数
    });

this {
this.getAccount(id);                         子组件接收参数
});

» 本文来自:前端开发者 » 《vue中的$EventBus.$emit、$on 遇到的问题_亦心_前端开发者》
» 本文链接地址:https://www.rokub.com/73850.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!