关于 vue3 中删除 $on/$once/$off API 后的替代方案(Github 仓库推荐)

vue-happy-bus

仓库地址

在 vue3 版本中删除了 $on/$once/$off API (see)，不过不用担心，可以使用此仓库作为替代方案，继续使用 event bus 的方式来实现跨组件的通信功能，并且不用手动去 $off 事件回调。

vue-happy-bus是一款基于vue3实现的订阅/发布插件。

在 vue 中，我们可以使用 event bus 来实现 跨组件间通信。但一个弊端就是，这种方式并不会自动销毁，所以为了避免回调函数重复执行，还要在 onUnmounted 中去移除回调函数。

这样带来的冗余代码就是:

1. $on 的回调函数必须是具名函数。不能简单的 $on('event name', () => {}) 使用匿名函数作为回调，因为这样无法销毁事件监听，所以一般采用 具名函数 作为回调
2. 在onUnmounted生命周期中去销毁事件的监听。

我只是想在某个路由中监听下 header 中一个按钮的点击事件而已，竟然要这么麻烦？？？

所以此轮子被造出来了 🤘。

它主要解决在夸组件间通信时，避免重复绑定事件、无法自动销毁的而导致回调函数被执行多次的问题。

总得来说他是能让你偷懒少写代码的工具。

安装

npm i vue-happy-bus@next
# or
yarn add vue-happy-bus@next

如何使用

自动注销监听事件的方式：

// foo.vue
import { $on } from 'vue-happy-bus'
export default {
  setup () {
    // 在 foo.vue unmounted 后，会自动销毁 foo.vue 中的事件回调
    $on('event name', (...args) => {
      // do something
    })
  }
}

// bar.vue
import { $emit } from 'vue-happy-bus'
export default {
  setup () {
    // 触发 foo.vue 中的 event name 事件 
    $emit('event name', 'bar1', 'bar2')
  }
}

$on/$once 会返回一个取消监听函数，用来停止触发回调：

import { $on } from 'vue-happy-bus'
export default {
  setup () {
    const stop = $on('foo', (...args) => {
      // 主动停止监听 foo 事件
      stop()
    })
  }
}

详细文档见此处