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
发表评论 (审核通过后显示评论)：