Vue下的EventBus
EventBus是用于Vue中组件通信的一种方式,常见的父子组件沟通方式有emit和props。
但假如跨组件传参沟通,或者是兄弟姐妹组件之间的传参沟通,使用EventBus或者Vuex就可以避免很多重复的props和emit。
Vuex适合的场景是中大型的项目,管理全站共用的状态。EventBus比较适用于小型的项目,不是太复杂的事件。
使用
EventBus实际上只是一个Vue的实例,接着分别调用这个实例的事件触发和监听来实现通信和参数传递。主要是下面四种方法:
- $on:注册监听
- $once:监听一次
- $off:取消监听
- $emit:发送事件
一般页面created的時候就注册监听,当组件销毁时取消监听。
创建一个EventBus
其实就是创建一个Vue的实例
1 | import Vue from 'vue'; |
在我们需要发送事件以及接收事件的组件中引入。
1 | import bus from '../common/bus'; |
监听
在需要监听的组件中的created中使用bus监听
1 | created() { |
发送事件
1 | methods: { |
取消监听
EventBus的监听不会自动关闭,接着会导致的一个情况就是监听会触发多次,所以需要我们用$off取消下绑定。
通常绑定在钩子函数 beforeDestroy() 或者 destroyed() 中
1 | // 移除事件的监听 |