vue3如何使用eventBus订阅发布模式
作者：别拿bug搞偷袭
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订阅发布模式的文章就介绍到这了,更多相关vue3 eventBus订阅发布模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！