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对外暴露要传递的数据，

父组件

 
<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，使用插槽进行父子组件通讯。

插槽分为：默认插槽，具名插槽，作用域插槽(父组件插槽内容使用子组件数据)

默认插槽

父组件

  <son>
     <h3>默认插槽h3>           
  son>