Vue3 ts 任意组件通信 mitt

一、环境

1、下载

npm i mitt

2、配置

a、新建

src/utils/emitter.ts

// 引入
import mitt from "mitt";
// 调用
const emitter = mitt()
// 暴露
export default emitter

二、使用

1、触发

a、引入

b、触发

<template><button @click="sendVal">工人触发</button>
</template><script setup lang="ts" name="Worker">
// 引入
import emitter from '@/utils/emitter';
// 触发
function sendVal(){emitter.emit("salary", 2800)
}
</script>

2、接收

a、引入

b、接收

c、关闭

<template> <div>工人工资：{{ salary }}</div>
</template><script setup lang="ts" name="Student">
// 1.引入
import emitter from '@/utils/emitter';
import { onUnmounted, ref } from 'vue';
let salary = ref(0)
// 2.接收
emitter.on('salary',(val:any)=>{salary.value = val
})onUnmounted(()=>{// 3.关闭emitter.off('salary')
})</script>

3、全部清楚

emitter.all.clear()