标签：知识点 name 订阅 Bus mitt list bus vue3

项目背景：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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。