关于 vue3 中删除 $on/$once/$off API 后的替代方案

推荐一个仓库。地址:https://github.com/tangdaohai...html

在 vue3 版本中删除了 $on/$once/$off API (see),不过不用担忧,能够使用此仓库做为替代方案,继续使用 event bus 的方式来实现跨组件的通讯功能,而且不用手动去 $off 事件回调。vue

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

在 vue 中,咱们能够使用 event bus 来实现 跨组件间通讯。但一个弊端就是,这种方式并不会自动销毁,因此为了不回调函数重复执行,还要在 onUnmounted 中去移除回调函数。github

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

  1. $on 的回调函数必须是具名函数。不能简单的 $on('event name', () => {}) 使用匿名函数做为回调,由于这样没法销毁事件监听,因此通常采用 具名函数 做为回调
  2. onUnmounted生命周期中去销毁事件的监听。

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

因此此轮子被造出来了 。ide

它主要解决在夸组件间通讯时,避免重复绑定事件、没法自动销毁的而致使回调函数被执行屡次的问题。函数

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

详细使用文档见此处),不过不用担忧,能够使用此仓库做为替代方案,继续使用 event bus 的方式来实现跨组件的通讯功能,而且不用手动去 $off 事件回调。ui

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

在 vue 中,咱们能够使用 event bus 来实现 跨组件间通讯。但一个弊端就是,这种方式并不会自动销毁,因此为了不回调函数重复执行,还要在 onUnmounted 中去移除回调函数。

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

  1. $on 的回调函数必须是具名函数。不能简单的 $on('event name', () => {}) 使用匿名函数做为回调,由于这样没法销毁事件监听,因此通常采用 具名函数 做为回调
  2. onUnmounted生命周期中去销毁事件的监听。

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

因此此轮子被造出来了 。

它主要解决在夸组件间通讯时,避免重复绑定事件、没法自动销毁的而致使回调函数被执行屡次的问题。

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

详细使用文档见此处

相关文章
相关标签/搜索