vue实现一个eventBus

eventBus应该有些听过，其实就是一个事件发布订阅的功能。vue提供了实例方法事件，就是once、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。

image