一天一个知识点-----vue3 中简单实现 vue2的bus总线

项目背景：vue3
众所周知在重构的vue3后，vue2的bus总线通信就随之无法使用。
bus总线有点像 Vuex 或者 Pinia ，可以使用发布订阅模式来简单实现下。
不是很了解的同学可以 ♥ 观察者模式浅尝♥
♥ 发布订阅模式浅尝♥

原理分析：

1. 参照发布订阅模式 需要一个list来存放相应的事件
2. $on 方法用来注册事件。
3. $emit 方法可以调用 $on 里的事件。
4. $off 方法可以注销 eventList 里的事件。

----上代码实现-----

class Bus {
	constructor(){
		list:{},//收集存放事件,相当于收集订阅信息,调度中心
	}
	//订阅
	$on(name,fn){
		this.list[name]=this.list[name] || []
		this.eventList[name].push(fn)
	}
	//发布
	$emit(name,data){
		//判断是否订阅
		if(this.list[name]){
			this.list[name].forEach((fn)=>{
				fn(data)
			})
		}
	}
	//取消
	$off(name){
		if (this.eventList[name]) {
		  delete this.eventList[name]
		}
	}
}
//导出Bus的实例
export default new Bus()

也可以像Vuex 或者 Pinia一样，在原型constructor上定义一些私有属性或公共数据

要使用的组件导入对应的bus.js，就能操作一份数据方法

bus的使用

跟 vue2的bus总线使用形式差不多

1.在父组件中

<script setup>
import Busbox from "./component/bus.vue";//子组件
import Bus from "../../config/Bus";//相应的 bus.js
import { onMounted, onUnmounted, ref } from "vue";

let busInfo = ref("");
//监听change
 Bus.$on("change", (res) => {
    console.log("子组件传递参数", res);
    busInfo.value = res;
 });
//在组件注销的时候取消相应订阅
onUnmounted(() => {
  Bus.$off("change");
});
</script>

2.在子组件中

<script setup>
import Bus from "../../../config/Bus.js";//相应的 bus.js
function clickPar(){
  //往change发布任务
  Bus.$emit('change','子组件点击了按钮')
}
</script>

有点类似于 mitt插件的用法，都是借鉴发布订阅模式，参考vue2的EventBus总线

mitt使用

先安装 npm i mitt -S
然后像以前封装 bus 一样，封装一下

mitt.js
import mitt from 'mitt'
const mitt = mitt()
export default mitt

后续是使用参考上面使用就行。

如果对发布订阅模式不是很清楚的
https://www.cnblogs.com/zjxlicheng/p/16469913.html
https://www.cnblogs.com/zjxlicheng/p/16517326.html

标签：知识点,name,订阅,Bus,mitt,list,bus,vue3
来源： https://www.cnblogs.com/zjxlicheng/p/16692781.html