5. 处理Event Bus事件并更新组件状态 在上面的监听示例中,当接收到custom-event事件时,我们通过Vue的响应式系统(这里是ref)来更新组件的状态(message变量),这会导致Vue重新渲染组件以显示新的消息。 确保在组件销毁时移除监听器是一个好习惯,这可以通过Vue 3的onUnmounted生命周期钩子来实现,以避免内存泄漏。 这样,...
在Vue3 项目中,Event Bus(事件总线)是一种常用的通信方式,它可以在不同组件之间实现简单而高效的通信。 一、Event Bus 的基本概念 Event Bus 是一种集中式的事件管理机制,它允许不同的组件之间发送和接收事件。在 Vue3 中,可以通过创建一个简单的对象来实现 Event Bus。 二、创建 Event Bus 我们可以创建一个...
创建事件总线文件: // src/EventBus.jsimportmittfrom'mitt';constemitter =mitt();exportdefaultemitter; 发送事件 importEventBusfrom'@/utils/EventBus';sendMessage() {// 有时由于执行顺序的原因,可能需要考虑微任务宏任务问题,可用setTimeout解决EventBus.emit('custom-event', {message:'Hello'}); } 监听...
Bus.emit("changeMsg", sayHi); }); 封装的event bus最优使用场景 1、非父子组件之间的通信: 如果需要在非父子关系的组件之间进行通信,可以使用自己封装的 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 中移除了 eventBus,但可以借助第三方工具来完成。Vue 官方推荐 mitt 或 tiny-emitter。大多数情况下,不推荐使用全局事件总线来实现组件通信。虽然比较简单粗暴,但是长期维护event bus是个大问题,这里就不多说了。具体可以阅读具体工具的文档。
了解EventBus 是一种事件总线的概念,它允许任意两个组件进行通信,不论它们之间的关系如何。Vue3中,可以使用一个全局的事件总线来实现组件间的通信。 实战案例:全局事件总线 在一些特定的场景下,全局事件总线是一个非常便捷的通信方式,比如跨组件的事件通知。下面是一个简单的实际应用案例: ...
EventBus/Mitt:全局事件总线。 通过props传递数据 props是 Vue 提供的机制,用于父组件向子组件传递数据。子组件通过定义props来接收数据,这种方式确保数据的单向流动。 代码示例: <!-- 父组件 Parent.vue --> <template> <ChildComponent :message="parentMessage" /> ...
如何使用 JavaScript 来实现一个简单版本的Event Bus 首先构造一个EventBus类，初始化一个空对象用于存放...
通过Vue3-Eventbus使用更优雅 👍👍👍 不需要在入口文件中编写额外逻辑,不需要每次引入inject函数,不需要每次为bus赋值,import进来一把梭直接用 安装 $ npm install --save vue3-eventbus 复制代码 挂载 import eventBus from 'vue3-eventbus' app.use(eventBus) ...