vue3如何使用eventBus订阅发布模式

// 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;

<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>

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