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>