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 '../bus/bus.js';
export default {
     
     
  setup() {
     
     
	 function fabu(){
     
     
 		Bus.$emit('addAge',{
     
     age:'19'});
	 }
   }
 }
</script>
  • 发布后,在订阅者的组件就会执行,注意对应的 订阅和发布的name 要相同。

猜你喜欢

转载自blog.csdn.net/weixin_42232622/article/details/126589557