在大部分场景下, 不推荐组件间采用 Event Bus 机制通信. 虽然, 总线机制最简单, 但长期来看, 其维护成本更高. 可以采用下面的通信方式来替代总线机制:
- props / events 是父子通信的首选. 兄弟组件可以通过共同父亲节点来通信.
- Provide / inject 可以让长距离跨组件通信.
- 利用 slots. 如果碰到中间组件不需要props, 但其上下游组件需要这些props时, 你可能是组件划分出现了问题. 这时候, 在中间组件上引入 slot, 让父组件直接填充内容, 这样就不用跨中间组件传递props了.
- 使用全局状态管理, 例如 Pinia.
总线使用方式
Vue 3 从 vue 实例中移除了总线相关事件, 只能通过第三方库来实现总线机制. 例如 mitt 或者 tiny-emitter.
// eventBus.js
import emitter from 'tiny-emitter/instance'
export default {
$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
$emit: (...args) => emitter.emit(...args)
}
