vue实现一个eventBus

eventBus应该有些听过，其实就是一个事件发布订阅的功能。vue提供了实例方法事件，就是$on、$once、$off、$emit。

在mainjs里面在vue原型上面挂载一个变量：

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

我在home页面注册了一个事件：

this.$eventBus.$on('home', (msg) => { console.log('home:' + msg);})

这个事件名字就是一个key，发布的时候需要用到。

接着我在另外一个页面live进行发布：

this.$eventBus.$emit('home', '这是live emit')

发布订阅要有个先后顺序，一定要先订阅，发布才会触发，比如父组件mounted里面注册，子组件触发，但是子组件生命周期先执行，父组件也不会触发。你先进入home进行订阅，接着切换到live，控制台输出：

home:这是live emit

如果我在back页面也注册一个home事件：

this.$eventBus.$on('home', (msg) => { console.log('back:' + msg);})

然后切换页面，每一个事件名为home的都会执行：

home:这是live emit

back:这是live emit

而且会严格按照注册顺序执行。

要注意的是，进入页面就注册事件，那么你每进入一次就会注册一次，就是说我在home和back来回切换几次，就会注册几次，然后跳转live页面就会同时执行：

home:这是live emit

back:这是live emit

home:这是live emit

back:这是live emit

在一定的业务逻辑上面，我们如果不需要使用某个事件，最好移除：

this.$eventBus.$off('home');

要注意，这个方法会把所有注册的home事件移除，不管注册几次。包括$once事件也会移除。

$once事件是只执行一次，相当于执行完之后执行off事件。

通过vue提供的api，很容易实现一个事件的发布订阅，基本的on、off、once、emit都很容易就实现了。在某些逻辑下还能当作组件间传递数据来使用。之后应该会分享自己去实现这样一个api。