一、环境
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()