Vue3中如何通过eventBus实现长尾词的发布订阅模式？

本文共计863个文字，预计阅读时间需要4分钟。

目录+.什么是eventBus？+vue3如何使用 eventBus步骤一：（eventBus 容器）步骤二：（订阅者）步骤三：（发布者）总结+什么是eventBus？通用的讲解，就是在任意组件中，想要在不同的组件间传递数据，可以使用 eventBus 来实现。它就像一个中介，让组件之间能够相互通信。+vue3如何使用 eventBus步骤一：（eventBus 容器）首先，创建一个 eventBus 实例，然后在需要通信的组件中引入这个实例。

步骤二：（订阅者）在需要接收消息的组件中，使用 eventBus 实例的 $on 方法来订阅事件。

步骤三：（发布者）在需要发送消息的组件中，使用 eventBus 实例的 $emit 方法来发布事件。

总结eventBus 在vue3中的应用相对简单，通过订阅和发布的方式实现组件间的通信。

目录

• Ⅰ. 什么是eventBus？
• Ⅱ. vue3 如何使用
• 步骤一 （eventBus 容器）
• 步骤二 （ 订阅者 ）
• 步骤三 （ 发布者 ）
• 总结

Ⅰ. 什么是eventBus？

通俗的讲，就是在任意一个组件，想把消息（参数） -> 传递到任意一个组件 ，并执行一定逻辑。

Ⅱ. vue3 如何使用

eventBus vue3中没有了，eventBus，所以我们要自己写，但是非常简单。

步骤一 （eventBus 容器）

在src目录，创建个bus文件夹，存放 自己写的 bus.js ；

编写 bus.js => 在class 原型上绑定三个 （订阅，取消订阅，发布）函数；

// bus.js class Bus { constructor() { this.list = {}; // 收集订阅 } // 订阅 $on(name, fn) { this.list[name] = this.list[name] || []; this.list[name].push(fn); } // 发布 $emit(name, data) { if (this.list[name]) { this.list[name].forEach((fn) => { fn(data); }); } } // 取消订阅 $off(name) { if (this.list[name]) { delete this.list[name]; } } } export default new Bus;

订阅者（on），讲函数放入 list 中 => 等待发布者（emit），传参去调用；

由于函数是对象，内存地址未发生变化，还在在订阅者（on）组件中执行。

步骤二 （ 订阅者 ）

在 comA.vue 中订阅；

订阅只是 存放函数，并未执行，等发布后才会执行；

<template> <div> {{ name }} --- {{ age }} </div> </template> <script> import {ref , onUnmounted} from 'vue'; import Bus from '../bus/bus.js'; export default { setup() { const name = '张三'; const age = ref(18) Bus.$on('addAge',({ num })=>{ age.value = num; }) //组件卸载时，取消订阅 onUnmounted( () => { Bus.$off('addAge') } ) } } </script>

在离开组件（onUnmounted）时 ，将注册进去的 ，订阅函数的数组删除，避免存放越来越多。

步骤三 （ 发布者 ）

在 comB.vue 中发布；

调用订阅 并传参；

<template> <button @click="fabu">发布</button> </template> <script> import Bus from '../eventBus/Bus.js' export default { setup() { function fabu(){ Bus.$emit('addAge',{age:'19'}); } } } </script>

发布后，在订阅者的组件就会执行，注意对应的 订阅和发布的name 要相同。

总结

到此这篇关于vue3如何使用eventBus订阅发布模式的文章就介绍到这了,更多相关vue3eventBus订阅发布模式内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！