Vue3：组件间通信-使用mitt实现任意组件间通信

一、情景说明

实现Vue3中任意组件间通信的技术：mitt
可以类比学习
1、pubsub
2、$bus
3、mitt

接收数据的组件：提前绑定好事件（提前订阅消息）
提供数据的组件：在合适的时候触发事件（发布消息）

二、案例

1、安装mitt

npm i mitt

2、编写mitt工具文件

// 引入mitt
import mitt from 'mitt'

// 调用mitt得到emitter，emitter能：绑定事件、触发事件
const emitter = mitt()

// 暴露emitter
export default emitter

3、使用mitt

mitt主要有4个API
all（获取所有绑定的事件）、emit（触发某个事件）、off（解绑某个事件）、on（绑定事件）

需求：组件A给组件B传数据

组件B
引入mitt工具

	import emitter from '@/utils/emitter';

绑定事件

	emitter.on('send-toy',(value:any)=>{
		toy.value = value
	})

组件卸载时解绑事件

	onUnmounted(()=>{
		emitter.off('send-toy')
	})

组件A
引入mitt工具

	import emitter from '@/utils/emitter';

触发事件

<button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button>

注意：绑定的事件，一定要在组件卸载时，解绑。