事件总线(Event Bus)可以理解为一个全局的发布/订阅模式,可以通过它来实现不同组件之间的消息传递。在Vue实例或Vue组件中充当一个中央枢纽,通过它可以让一个组件发出事件,而其他组件监听并响应这些事件 事件总线的创建 Vue3版本中,我们不再使用new Vue()来创建事件总线,而是通过mitt库,该库轻量且专注于事件总线功能。
在Vue 3中,可以通过创建一个事件总线(event bus)来实现组件之间的通信。要在Vue 3中使用事件总线,主要步骤有:1、创建一个新的Vue实例作为事件总线,2、在组件中引入并使用该事件总线。以下是详细的步骤和示例。 一、创建事件总线 在Vue 3中,创建事件总线的方式与Vue 2有所不同。Vue 3不再直接使用Vue实例作为...
如果需要在非父子关系的组件之间进行通信,可以使用自己封装的 Event Bus 实现跨级通信。 2、多个兄弟组件之间的通信: 如果需要多个兄弟组件之间相互通信,则可以使用自己封装的 Event Bus 来实现。 3、全局事件监听: 如果需要在任何地方都能监听到某个事件并做出响应,则可以使用自己封装的全局事件总线来实现。
第一步: 创建一个event-bus.ts文件(这里也可以使用js,一样的) 代码如下: import Mittfrom'mitt'consteventHub =newMitt(); exportdefaulteventHub; 第二步:挂载到全局,在main.ts中引入event-bus.ts文件 1import { createApp }from'vue'2import'./style.css'3import Appfrom'./App.vue'4import eventHubfrom...
一、创建事件总线 在Vue 3中,我们可以通过创建一个新的Vue实例来作为事件总线,但更推荐使用Vue 3的新特性——mitt库。mitt是一个轻量级的事件总线库,适合与Vue 3一起使用。 安装mitt库: npm install mitt 在项目中创建一个新的事件总线文件,例如:eventBus.js: ...
Event Bus事件总线，通常作为多个模块间的通信机制，相当于一个事件管理中心，一个模块发送消息，其它模块...
在Vue3中,兄弟组件之间传值通常不直接通过Vue的内置机制实现,因为Vue的官方推荐方式主要是父子组件之间的通信(通过props和事件)。不过,我们可以通过一些间接的方法来实现兄弟组件之间的通信。以下是五种常用的方法: 使用事件总线(Event Bus) 事件总线是一个新的Vue实例,用于在不同组件之间传递事件。虽然这不是Vue3...
Event Bus 事件总线，充当多个模块间的通信桥梁，相当于事件管理中心。当一个模块发送信息，其他模块接收信息，就实现了通信。例如，Vue组件间数据传递可通过Event Bus进行通信，也可用作微内核插件系统中插件与核心间的通信。原理基于发布-订阅模式，多个模块如A、B、C订阅事件EventX，某模块X在事件总线...
EventBus通常被称之为 “全局事件总线” ,它是用来在全局范围内通信的一个常用方案,它的特点就是: “简单” 、 “灵活” 、“轻量级”。 TIP 在中小型项目,全局通信推荐优先采用该方案,事件总线在打包压缩后不到 200 个字节, API 也非常简单和灵活。
1、引入mittBus中间件 在Vue 3 中,mittBus 是一个使用 mitt 库创建的事件总线(event bus)。mitt 是一个非常轻量的事件发射(emit)库,它可以用来在不同的组件之间发送和接收事件,从而实现组件之间的通信。 一、安装依赖: 二、创建事件总线: 通常,会在某个公共的地方(例如 utils/mittBus.js 文件)使用 mitt ...