vue的keep-alive中使用EventBus的方法


Posted in Javascript onApril 23, 2019

最近项目中由于列表居多且都做了下拉刷新上拉加载,所以就使用了keep-alive组件来缓存页面数据,但是当在其他页面做一些操作改变了列表数据,当来到列表的时候每次都要下拉刷新一下,体验不好,所以就使用到了EventBus,在需要更新的时候就用EventBus来刷新列表。

1.keep-alive组件

keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。但是对于展示型页面比较好用,表单类页面也会将所填数据保存起来,对于那种表单没提交又需要保存所填数据的场景非常实用。

keep-alive所缓存的页面只会执行一次created和mounted,也就是在第一次进入才会执行。但是又会多两个生命周期,分别是activated、deactivated,activated在每次进入执行而deactivated在每次离开前执行。 当然有些页面不需要缓存,就要进行一些处理,这里就不多讲了,因为估计大家都知道(不知道百度去...)。

2.EventBus(事件总线)

EventBus用于实现组件之间的数据通讯,使用起来非常之简单。只需要在main.js中加入以下代码:

Vue.prototype.$eventBus = new Vue();

上面代码就创建了一个全局EventBus,其实就是一个vue实例。

这样我们就可以在各个页面中使用了。

在页面中使用 $emit 方法就可以触发事件,然后组件中使用 $on 方法就可以监听对应事件,这个和组件之间传值是一样的。不过这个可以在非父子组件中传递状态,和vuex差不多。当然这种方法在简单应用中可以使用,复杂的应用应该使用 vuex ,这样方便管理和维护。

this.$eventBus.$emit('msg',data);// 触发事件
this.$eventBus.$on('msg',(data)=>{}) // 监听事件

3.组合使用

这两个我感觉很配,当我们使用keep-alive缓存了页面组件,我们需要在A面来触发B页面的列表刷新或其他方法时,这时候使用EventBus就非常方便,其他方法也可以,比如说使用vuex,但是此时就没有直接使用EventBus方便快捷了。 当我们在页面中使用了 this.$eventBus.$on 去监听一个事件,只要页面被缓存,就可以监听到其他页面触发的事件。这样我们就可以减少一些不必要的请求,而且在需要更新的时候去更新,也可以做一些其他的操作,简直美滋滋。

总结

以上所述是小编给大家介绍的vue的keep-alive中使用EventBus的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
js继承的这6种方式!(上)
Apr 23 #Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 #jQuery
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 #Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 #Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 #Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 #Javascript
vue watch关于对象内的属性监听
Apr 22 #Javascript
You might like
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
django创建自定义模板处理器的实例详解
2017/08/14 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
python版大富翁源代码分享
2018/11/19 Python
django fernet fields字段加密实践详解
2019/08/12 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
python读取ini配置文件过程示范
2019/12/23 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
中秋节慰问信
2015/02/15 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android