Vue3中的组件通信

1.【props】父传子

props是使用频率最高的一种通信方式，常用于：父<—>子之间
1）若父传子，属性值是非函数
2）若子传父，属性值是函数

2.自定义事件

$event占位，表示事件对象

<button @click="test(5,6,$event)" type="primary" block round>确定</button>

function test(a: number, b: number,c:Event) {
  console.log(a,b,c);
}

官方推荐写法：
事件名多个单词组成建议用肉串命名，send-toy 而不是sendToy

3.mitt

1）安装mitt
npm i mitt
2) 在utils目录下增加emitter.ts

// 引入mitt
import  mitt from "mitt";

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

// 暴露emitter
export default emitter

使用时对应页面：
import emitter from ‘@/utils/emitter’
import { onUnmounted ,onMounted} from ‘vue’
方法：进行发布订阅
核心代码主要实现就是：

1）.all = all || new Map() mitt 支持传入 all 参数用来存储事件类型和事件处理函
数的映射Map，如果不传，就 new Map()赋值给 all

2）.on(type, handler)定义函数 on来注册事件，以type为属性，[handler]为属性值，
存储在 all 中，属性值为数组的原因是可能存在监听一个事件，多个处理程序

3）.off(type, [handler])来取消某个事件的某个处理函数，根据 type 找到对应的事件处理数组，
对比 handler 是否相等，相等则删除该处理函数，不传则删除该事件的全部处理函数

4）.emit(type, [evt])来派发事件，根据 type 找到对应的事件处理数组并依次执行，传入参数 evt(对象最好，传多个参数只会取到第一个)

4.组件通信v-model

$event对于原生事件，$event就是事件对象=》能.target
对于自定义事件，$event就是出发事件时所传递的数据=》不能.target