在vue2的时候,我们可以通过$on$off$once$emit来实现一个事件总线EventBus,但是vue3的时候,又换了一套逻辑思想。

官方不鼓励使用EventBus在组件之间进行通信,虽然短期内确实是非常简单的解决方案,但是从长远来看,它总是很难维护的,所以官方更加推荐使用其他方式:

  1. 父子组件之间可以通过Props和自定义事件来进行沟通,如果是兄弟组件,可以通过父级组件来沟通
  2. 使用Provide / inject方式来跨层级沟通,比如与插槽的内容组件。
  3. Provide / inject也可以用于跨层级沟通,以避免props,emit事件层级过深的问题
  4. 通过使用插槽的形式来避免层级沟通,因为插槽和父级组件可以在同一层级下。
  5. 使用全局状态管理器:状态管理,说白了就是通过vue3的响应式数据方法+es module导出实现一个小型vuex。
  6. 使用pinia管理状态

由于vue3直接取消了$on$off$once方法,$emit作为自定义事件触发没有被取消,所以导致如果之前使用了EventBus则没有官方的迁移方式。

官方推荐了两个插件:

  1. mitt
  2. tiny-emitter

mitt的更新比较新,如果你有最新强迫症的话,那应该不用犹豫选哪个了。

分类: vue3 快速上手 标签: vue3$on$off$onceEventBus

评论