vue3 使用 mitt库 进行动态切换组件

创建兄弟中间点

import mitt from 'mitt';
const emitter = mitt();
export default emitter;

第一个组件中

import emitter from '@/utils/eventbus'; // 引入ts文件
// 这个是方法，传递过来的name是组件名字
const handleMore = (name: string) => {
  emitter.emit('setRightDrawer', name);
};

第二个组件中

<template>
	<component :is="currentComponent"></component>
</template>
<script setup lang="ts">
	import emitter from '@/utils/eventbus'; // 引入ts文件
	// markRaw 作为响应式的
	import { defineAsyncComponent, markRaw, ref } from 'vue';
	const rightDrawer = markRaw(defineAsyncComponent(() => import('./processDetail/rightDrawer.vue'))); // 原先的
	const cpDrawer = markRaw(defineAsyncComponent(() => import('./processDetail/detail/cpDrawer.vue'))); // 加工产品
	let currentComponent = ref(rightDrawer);
	// 另外一个组组件传递过来的name
	emitter.on('setRightDrawer',(name) => {
	  if(name === 'cp'){
	    currentComponent.value = cpDrawer
	  }else{
	    currentComponent.value = rightDrawer;
	  }
	})
</script>