浅谈vue3中使用mitt实现事件总线应用

事件总线(eventbus)实际上是一个vue组件,因为是vue创建的组件,所有其他所有组件都能访问和修改其上的内容,才能够满足所有组件进行传参的需求

vue文档中并没有介绍有关事件总线的使用,是程序员们摸索出来的一种能进行组件传参的工具

它不仅可以传参,还可以一定程度上代替vuex进行简单的数据共享,甚至在小型项目中数据共享方面代替了vuex。

应用:

在main.js中引入并命名

 

 在A组件中先引入getCurrentInstance方法,再将$bus方法声明

 利用bus的emit方法绑定,第一个参数为函数名,第二个参数为需要传的参数。

触发showDetail即可绑定成功,任何组件都可用$bus.on方法调用

(注:此处为ts写法,需要给参数定义类型,js无需定义,)

 

在B组件中同上两步骤

 

 

可在生命周期函数onMounted中调用,如此B组件就能使用A组件传过来的参数。

组件失效后用off方法删除,避免on方法出现bug多次调用

 

 代替vuex的数据共享,即在A组件中用emit绑定函数与传参,B,C,D,E组件都可以用on方法获取参数,达到了数据状态共享的目的

  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue3,官方建议使用外部的、实现事件触发器接口的库来实现事件总线的功能,而mitt是其一个常用的选择。mitt是一个非常小巧的库,只有200字节大小,并且支持全部事件的监听和批量移除。它不依赖于Vue实例,可以在不同的框架或项目使用,例如React、Vue甚至是jQuery项目都可以使用同一个mitt库来实现事件总线的功能。在使用mitt时,你需要先安装mitt库(npm i mitt -s),然后可以通过mitt()创建一个mitt实例,并使用其提供的API来进行事件的绑定、触发和解绑操作。 下面是一些mitt库的常用API: - `emit(name, data)`:触发事件,其`name`是要触发的事件名称,`data`是需要传递的参数。 - `on(name, callback)`:绑定事件,其`name`是要绑定的事件名称,`callback`是触发事件后执行的回调函数。 - `off(name)`:解绑事件,其`name`是需要解绑的事件名称。 在Vue3使用mitt库可以参考以下步骤: 1. 首先,你需要安装mitt库(npm i mitt -s)。 2. 然后,在需要使用事件总线的组件引入mitt库,例如在你的`bb.vue`组件,你可以使用`import bus from "../utils/EventBus"`来引入mitt库。 3. 在需要发出事件的地方(例如点击按钮时),可以使用`bus.emit("data", 18)`来触发名为"data"的事件,并传递参数18。 希望这个回答对你有帮助!如果你还有其他问题,请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值