vue的keep-alive中如何使用EventBus-创新互联

这篇文章主要介绍了vue的keep-alive中如何使用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”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!