vue3组件之间通讯
1. props，实现父组件向子组件通讯。
父组件 ：对子组件属性绑定要通讯的数据。
子组件：通过defineProps来进行数据接收。
2. emit，实现子组件向父组件通讯。
子组件：通过emit创建向父组件传递数据事件
父组件：通过自定义事件接收子组件传递数据。
3.mitt，实现任意组件之间通讯。
准备工作：安装mitt依赖包（npm i mitt），创建emitter.ts文件。
组件A（发送数据）：通过emitter.emit绑定事件。
组件B（接收数据）：通过emitter.on接收事件，取出数据。并在组件销毁时通过 emitter.off解绑事件。
4.v-mode，通过v-model实现原完成组件通讯（不推荐用，了解v-model实现流程）
v-model实现原理实际是通过属性绑定（父传子）和事件绑定（子传父）
html原始元素（input等）和 vue2中 v-model底层 属性名为:value 事件名为 @input
vue3中 v-mode 底层属性名为:modelValue 事件名为@update:modelValue ，update:modelValue中的属性名没有任何意义就是字符串
封装组件
5.attrs，通过attrs实现祖孙通讯（不推荐用，了解$attrs）
当父组件向子组件传递数据，在子组件中并未声明使用则数据会暂存到组件$attrs中，此时子组件可以通过v-bind="$attrs",将这些暂存数据传递给孙组件中。
父组件
子组件
孙组件
5.$ref和$parents，父组件通过$ref获取子组件实例，子组件通过$parents获取父组件实例。
组件通过defineExpose对外暴露要传递的数据，
父组件
<template><div>04$refs{{ msg }}<p>{{ x }}</p><button @click="chang1">查看子组件1数据</button><button @click="chang2" style="margin-left: 10px;">查看子组件2数据</button><button @click="chang3($refs)" style="margin-left: 10px;">获取所有子组件数据</button><son1 ref="son1Ref"></son1><son2 ref="son2Ref"></son2></div>
</template><script setup>
import son1 from './06$refs-$parents/son1.vue'
import son2 from './06$refs-$parents/son2.vue'
import {ref} from 'vue'
let msg = ref('3')
let x = 10
let son1Ref = ref()
let son2Ref = ref()
function chang1(){//子组件需要暴露出具才能获取到console.log("我是父组件获取子组件数据和事件");console.log(son1Ref.value)console.log(son1Ref.value.a);console.log(son1Ref.value.b);son1Ref.value.changeData()
}
function chang2(){//子组件需要暴露出具才能获取到console.log(son2Ref.value)
}
function chang3(e){//获取所有子组件实例对象console.log(e);
}
defineExpose({msg,x})</script>子组件
6.provide和inject，父组件可以向后代任意组件进行通讯。
父组件通过provide传递数据，后代组件通过inject接收数据
父组件
子组件
7.slot，使用插槽进行父子组件通讯。
插槽分为：默认插槽，具名插槽，作用域插槽(父组件插槽内容使用子组件数据)
默认插槽
父组件
<div><son><h3>默认插槽</h3> </son>
</div>子组件
<div><p>下面是默认插槽内容</p><slot></slot>
</div>具名插槽
父组件
<div><son><template v-slot:s2><h3>具名插槽</h3></template> </son>
</div>子组件
<div><p>下面是具名插槽内容</p><slot name="s2"></slot>
</div>作用域插槽
父组件
<son><template v-slot="cars"><h2>我是作用域插槽</h2><div v-for="item in cars.carList" :key="item.name">{{ item.name }} </div></template></son>子组件
<div><slot :carList="carList"></slot>
</div>