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
vue中的$EventBus.$emit、$on的应用的更多相关文章
- vue中$on与$emit的实际应用
$on常用于监听自定义事件,触发后可传入参数 //监听event1事件 vm.$on('event1',function(msg){ console.log(msg) }) //触发event1自定义 ...
- vue中的eventBus
在vue2中,父子组件传递数据,父组件可以直接传递数据进子组件,而子组件通过调用父组件传递进来的方法,将自己的数据传递回去. 那兄弟组件之间,或者是兄弟组件的子组件之间如何传递呢? 当然vuex是一种 ...
- vue中eventbus的使用
eventbus的方法很是简单,我们需要做三步事情: 第一步,我们需要创造一个容器去充当我们的eventbus 第二步,我们需要去抛出,或者说提交我们的事件 第三步,我们去监听我们的那个事件(也许这才 ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- vue中watched属性
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
- 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面
v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
随机推荐
- __name__='main' 这句代码是什么意思?《读书笔记》
当我们阅读 别人的python代码都会有 if name == "main"这么一行语句,但却不知道为什么要写这个?有什么用 想知道这段代码什么意思让我们来根据例子来测试一下 我们 ...
- 【BZOJ1999】树网的核
题目大意:题目过长,无法简单描述... 题解: 由于树网的核一定是树直径的一段,因此考虑先将直径取出,通过两次 BFS 即可.要求的东西是树上任意一点到这条取出的线段的距离的最大值,发现这个最大值有可 ...
- 【洛谷P2292】L语言
题目大意:给定一个长度为 N 的字符串和一个字典,字典中所有的字符串的长度均不超过 10,求给定的字符串从前往后最多有多少位可以与字典匹配. 题解:设 \(dp[i]\) 表示串的前 i 位是否能够与 ...
- MFC界面库BCGControlBar v30.1新功能详解:Dialogs和Forms
亲爱的BCGSoft用户,我们非常高兴地宣布BCGControlBar Professional for MFC和BCGSuite for MFC v30.1正式发布!此版本包含themed find ...
- web性能优化--减少客户端请求数(一)
多图标合并,用css分隔 设置较长时间的过期时间 合并多个css文件 合并多个js文件 根据域名划分内容 首先介绍一款速度测试工具:webpagetest(填上url,username,passwor ...
- axios获取响应头
[转载] 来源:https://segmentfault.com/a/1190000009125333 在用 axios 获取 respose headers 时候获取到的只有的 Object { c ...
- fail2ban CentOS7安装
一.安装1.安装yum install shorewall gamin-python shorewall-shell shorewall-perl shorewall-common python-in ...
- 【leetcode】Sliding Puzzle
题目如下: On a 2x3 board, there are 5 tiles represented by the integers 1 through 5, and an empty square ...
- Spring Boot 的各种start
新建一个springBoot项目时,你会选择很多依赖,在项目中的build.gradle中你会看见各种start,例如下边的代码: 今天就在这里列举一下各种start: 1.spring-boot-s ...
- java总结2
1,对象数组,必须指定了数组长度,长度是固定的 2,除了ArrayList<E>以外,类赋值给变量,只有string类拿到的是值,其他类拿到的都是类的地址值, ArrayList<E ...