vue3 子组件和子组件的通讯 mitt

vue3 子组件和子组件的通讯 mitt

main,js

import mitt from "mitt";
const eventBus = mitt();app.config.globalProperties.$bus = eventBus; // 全局事件

组件1 传值到组件2

组件1

const {getcurrentInstance }from'vue;const proxy= getcurrentInstance()//返vue的实例const handleClick = (item, index) => {caseId.value = index;proxy.$bus.emit('openCase', true)// 发布事件，触发console.log(item, "item, index", proxy.$bus.emit);};

组件2 接收

// 处理接收到的事件
const handleOpenCase = (item) => {// 这里可以处理传递过来的数据console.log('接收到的数据:', item)// 打开弹框emit('update:dialogVisible', true)
}onMounted(() => {// 注册事件监听器proxy.$bus.on('openCase', handleOpenCase)
})onUnmounted(() => {// 移除事件监听器，避免内存泄漏proxy.$bus.off('openCase', handleOpenCase)
})