Event Bus

在大部分场景下, 不推荐组件间采用 Event Bus 机制通信. 虽然, 总线机制最简单, 但长期来看, 其维护成本更高. 可以采用下面的通信方式来替代总线机制:

  1. props / events 是父子通信的首选. 兄弟组件可以通过共同父亲节点来通信.
  2. Provide / inject 可以让长距离跨组件通信.
  3. 利用 slots. 如果碰到中间组件不需要props, 但其上下游组件需要这些props时, 你可能是组件划分出现了问题. 这时候, 在中间组件上引入 slot, 让父组件直接填充内容, 这样就不用跨中间组件传递props了.
  4. 使用全局状态管理, 例如 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)
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容