vue中使用eventBus传值

最近使用vue做一个搜索的demo,涉及一些公共状态管理，状态量很少不想用vuex（主要是懒）。于是用eventBus做公共状态管理。
一般创建一个evenBus.js

import Vue from 'vue'
export default new Vue()
//新建vue实例

在需要发布值的地方：

import eventBus from './eventBus.js'
...
eventBus.$emit('key',value )

接收组件监听：

import eventBus from './eventBus.js'
...
eventBus.$on('key',function(value){...} )

一般来说这样就行了，但是测试几次从inside发布搜索参数到list都不能接受，但是在list页面能使用搜索是可以接受到参数的。

image.png

查了下资料发现：

vue-router切换的时候，会先加载新的组件，当新的组件渲染好但是还没mount的时候，销毁旧组件，然后再挂载新组件，也就是说当B页面的生命周期进行到beforeMount的时候，下一步走到的就是A页面的beforeDestory方法和接下去的destroyed方法

好了生命周期的问题，inside发布参数的时候list页面没创建，因此监听也没有启动，所以导致在inside点击搜索没有反应，而在list直接点击搜索是正常的。list页面的监听事件已经启动了。

查了下api有个$nextTick，Dom渲染完毕后回调，在nextTick中发布参数list页面能正常接收，另外监听的组件要在beforeDestroy()中$off掉监听，不然重新加在组件就会重复监听触发多次$on。