Vue事件总线和keep-alive

一些特殊的场景（如没有父子关系），那么Vue自带的通信事件解决不了。需要用到事件总线：、

1. 全局挂载 Vue.prototype.$bus =new Vue()
2. 发送事件 this.$bus.$emit('getItem',this.playListItem) //页面A
3. 监听事件 this.$bus.$on('getItem',(item)=>console.log(item))//在页面B created中执行

今天碰到的问题

1.没有监听到事件

第一次A页面发送getItem事件的时候，页面B中的$on事件没有被触发，返回A页面再发送一次才被B页面on监听到A发送的事件getItem

* 翻了资料找到了原因：当我们还在页面A的时候，页面B还没生成，也就是页面B中的 created中所监听的来自于A中的事件还没有被触发。这个时候当页面A中发送事件的时候，B其实是没有监听到的。

* 解决办法：把A页面组件中的emit事件写在`beforeDestory`中去。因为这个时候，B页面组件已经被created了，也就是我们写的on事件已经触发了，所以可以在`beforeDestroy`的时候， on事件已经触发了，所以可以在`beforeDestory`的时候，on事件已经触发了，所以可以在`beforeDestory`的时候emit事件
* ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fe196493a614344a7320a2b258a90b1~tplv-k3u1fbpfcp-watermark.image)

2.事件会叠加发送

后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多。 如下

*	![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa107f86141440fc8e6320b6e599e925~tplv-k3u1fbpfcp-watermark.image)
* #### 产生原因：
	就是说，这个$on事件是不会自动清楚销毁的，需要我们手动来销毁。
 
 * 解决：在B组件页面中添加`Bus.$off`来关闭
	![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d82a109f2d354c7a8d30d9fdf0d94d94~tplv-k3u1fbpfcp-watermark.image)

3.使用keep-alive 碰到的问题

又发现一个问题：keep-alive缓存的页面只会执行一次created和mounted并且页面被缓存下来，没有destroyed和created了 但是又多了俩个生命周期函数activated、deactivated。如如果使用了keep-alive：就要在A页面的deactivated 发送$bus事件了, 同样的要在B页面的deactivated注销事件

概括

一、组件A emit 事件应在beforeDestory生命周期内。

二、组件B内的 on 记得要销毁

三、使用了keep-alive要在activated、deactivated 发送和注销事件