vue3 $EventBus自定义发布订阅模式

最新推荐文章于 2024-09-30 15:41:58 发布

九州县令

最新推荐文章于 2024-09-30 15:41:58 发布

阅读量441

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_48201140/article/details/128225152

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

在Vue3中，由于$on和$emit的移除，传统的EventBus不再适用。为实现发布订阅模式，文章推荐使用mitt库来创建自定义的EventBus。首先安装mitt，接着在myBus.js中封装mitt，然后在main.js中引入并将其挂载到全局，使得Vue实例可以使用$EventBus进行事件通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于经常使用vue2的人来说 $E v e n t B u s 相比会很熟悉，但是在 v u e 3 中$ EventBus（事件总线）就失效了。
因为Vue3不再提供$on与emit函数，Vue实例不再实现事件接口。官方推荐引入外部工具实现
在此推荐使用**mitt* 安装mitt

//npm
npm install mit -s
//yarn
yarn add mitt

然后新建myBus.js文件对mitt进行封装

import mitt from 'mitt'
 
const bus = {}
const emitter = mitt()
 
bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit
 
export default bus