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()