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

最新推荐文章于 2024-07-23 15:40:17 发布
最新推荐文章于 2024-07-23 15:40:17 发布
阅读量455 收藏 6
点赞数 10
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shs_s/article/details/131770351
版权

事件总线（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方法获取参数，达到了数据状态共享的目的

shs_s
关注
  • 10
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue——使用mitt
qq812457115的博客
02-27 601
【代码】Vue——使用mitt。
vue3中使用第三方插件mitt实现任意组件通讯
黄钢的博客
08-18 1541
组件通讯是vue3组合式开发的核心之一，现在我在写代码时，一个组件的代码超过了200行，基本都会拆分组件。
Vue3笔记_mitt库(事件总线)
qq_41196217的博客
10-11 1万+
mitt库在vue3中的使用 Vue3移除了$on $off等自带的自定义事件相关方法，因此在vue3中他推荐我们下载mitt库来使用事件总线传递数据，其实mitt的使用方式和vue原本的自定义事件使用方式相同，所以我们不必担心学习成本！ 安装mitt库 npm i mitt 使用mitt库 可以在单独的文件暴露出事件总线对象 // mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象 /* eventbus.js */ // 这里我们在js中暴露这个事件总线对象 import mit
解决 vue3 使用mitt（发布订阅库）时，多次触发事件订阅问题
学海无涯，回头是岸
12-08 1509
在日常vue项目开发中，有时会用到mitt（前身事件总线mittBus）进行事件传递，然而使用经常就是mitt().emit() , mitt().on 就结束了，未考虑到取消订阅事件，这就导致同个实例上绑定了多个相同的订阅事件，导致触发多次
Vue组件间的数据共享（父子，兄弟，后代，全局事件总线，Vuex）
切图仔
04-21 4560
Vue组件间的数据共享（父子，兄弟，后代，Vuex）
vue3.x中使用cesium，vue3.x+Cesium
05-04
将Cesium集成到Vue3.x项目中，可以创建交互式的3D地图应用。以下是关于在Vue3.x中使用Cesium的知识点： 1. **Vue CLI集成**: 首先，你需要通过Vue CLI创建一个新的项目。执行`vue create my-vue3-cesium-project`...
浅谈vue3中effect与computed的亲密关系
10-16
主要介绍了浅谈vue3中effect与computed的亲密关系，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-peerjs:在Vue应用中使用PeerJS实现WebRTC
03-27
总的来说，`vue-peerjs`使得在Vue应用中实现WebRTC通信变得相对容易，但理解WebRTC的基本概念和工作原理仍然至关重要，因为这将影响到如何有效地使用`vue-peerjs`进行实时通信的实现。同时，确保正确配置和使用...
浅谈vue中组件绑定事件时是否加.native
10-16
在Vue中，我们可以使用`.native`修饰符来决定事件绑定的行为。本文将深入探讨Vue组件绑定事件时是否需要添加`.native`修饰符及其背后的原理。 1. 普通组件绑定事件 在Vue中，当我们为一个普通的HTML元素（如`...
浅谈Vue SSR中的Bundle的具有使用
01-21
写过Vue SSR的都知道，Vue通过提供server和client的webpack插件生成bundle josn，从而实现类似服务端的热更以及客户端资源的优化注入。那么这两个个bundle到底有什么神奇的呢？OK，话不多说，进入正题 客户端 vue-...
vue3 mitt事件重复触发
Liyan_Yanna的博客
06-07 2942
子元素中发起的事件 setup(props) { onMounted(() => { bus.emit("add", {value: '测试'}) }) return {} } 父元素中监听 import bus from "@/utils/mitt"; ... setup(props) { var i = 0; bus.on('add', (d
mitt工具解读
Gloomysunny的博客
01-17 1225
首先贴上代码 export type EventType = string | symbol; export type Handler<T = any> = (event?: T) => void; export type WildcardHandler = (type: EventType, event?: any) => void; export type EventHandlerList = Array<Handler>; export type WildCar
vue3.0的event hub替换方案- mitt 实操及mitt源码窥探
你记住你不是一个人在苦逼
09-23 5085
js在 2.x 中，Vue 实例可用于触发通过事件触发 API 强制附加的处理程序 ($on，$off 和 $once)，这用于创建 event hub，以创建在整个应用程序中使用的全局事件侦听器： 然而 我们整个从实例中移除了 $on，$off 和 $once 方法，$emit 仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序 因实际项目中 都是用 event hub 例如下面业务代码 bus.$on('refrestatus' + this.data.oort_u.
VUE3前端笔记 Mitt事务总线使用方法
热门推荐
老富的博客
02-16 1万+
VUE3前端笔记 Mitt事务总线使用方法方案一 方案一 (1)全局总线 ①安装第三方总线插件mitt ②vue入口文件main.js中挂载属性 //导入插件mitt import mitt from “mitt” … //创建Vue应用实例 const app = createApp(App) //挂载事务总线为全局属性 app.config.globalProperties.mybus=newmitt()...③发送事件/发布this.mybus = new mitt() ... ③发送事件/发布 th
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 623
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 176
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 965
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
【vueUse库Time模块各函数简介及使用方法--全篇】
最新发布
xiejunlan的博客
07-23 625
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
vue 腾讯云 javascript sdk + 简单富文本组件设计+实战
呵呵哒!的博客
07-19 292
【代码】vue 腾讯云 javascript sdk + 简单富文本组件设计+实战。
vue3 事件总线mitt
09-24
在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、付费专栏及课程。

余额充值