1、安装mitt
npm i mitt
2、封装mitt
在src下创建utils,在utils创建文件emitter.ts
import mitt from 'mitt'
const emitter = mitt()
export default emitter
3、使用mitt
在需要发送数据的组件的script标签中
import emiter from '../utils/emitter'
//发送数据
emitter.emit('send',{id:1,name:'张三')
在需要接收数据的组件
import emitter from '../utils/emitter'
emitter.on('send',info=>console.log('接收到的数据为:',info)
4、案例演示
需要发送数据的组件,其中emitter.emit('send',{data:123,id:222}),这里的send是发送事件的名字,接收数据也用这个名字
<template>
<button @click="send">发送一个东西</button>
</template>
<script setup lang="ts">
import emitter from '../utils/emitt'
const send=()=>{
console.log('发送');
emitter.emit('send',{data:123,id:222})
}
</script>
<style>
</style>
需要接收数据的组件,下图的info代表接收到的数据
<template>
</template>
<script setup lang="ts">
import emitter from '../utils/emitt'
emitter.on('send',info=>console.log(info))
</script>
<style>
</style>