博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue的keep-alive中使用EventBus
阅读量:5912 次
发布时间:2019-06-19

本文共 1111 字,大约阅读时间需要 3 分钟。

最近项目中由于列表居多且都做了下拉刷新上拉加载,所以就使用了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去监听一个事件,只要页面被缓存,就可以监听到其他页面触发的事件。这样我们就可以减少一些不必要的请求,而且在需要更新的时候去更新,也可以做一些其他的操作,简直美滋滋。

第一次发布文章,只是想和大家做一个交流,不足的地方还请大神多多指点。

转载地址:http://pvqpx.baihongyu.com/

你可能感兴趣的文章
map的综合例子
查看>>
前端基于jquery的UI框架
查看>>
上传文件multipart form-data boundary 说明
查看>>
java中的数据加密3 非对称加密
查看>>
从程序员到项目经理(6):程序员加油站 -- 懂电脑更要懂人脑【转载】
查看>>
Office转SWF的一些感想(Office2007和Office2010)
查看>>
使用 IntraWeb (3) - 页面切换
查看>>
XSS解决方案系列之四:关于编码
查看>>
WP8__从windowsphone app store 中根据app id获取应用的相关信息(下载网址及图片id等)...
查看>>
javascript浮点数转换成整数三种方法
查看>>
(int)()和int()强制类型转换
查看>>
经济学发展史
查看>>
MySQL创建定时任务
查看>>
Android判断当前线程是否是主线程的方法
查看>>
Step-by-Step Guide to Portal Development for Microsoft Dynamics CRM - 摘自网络
查看>>
win7或win2008系统中,出现【已停止工作,联机检查解决方案并关闭该程序,关闭程序】解决方法!...
查看>>
UNIX环境编程学习笔记(11)——文件I/O之文件时间以及 utime 函数
查看>>
http请求返回405
查看>>
孩子的同学写的:《恋秋 忆秋 叹秋》
查看>>
SQL窗体函數一例
查看>>