vue3 eventBus订阅发布模式
别拿bug搞偷袭 人气:0Ⅰ. 什么是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 要相同。
总结
加载全部内容