06vue3.2-组合式API-组件通信

1. 父传子(defineProps)

基本思想:

1. 父组件中给子组件绑定属性
2. 子组件内部通过props选项接收数据

例子：

const props = defineProps({
    msg:{
        type: String,
        default: '默认值',
        required: true // 是否必传

    }
})

image.png
image.png

2. 子传父(defineEmits)

基本思想:

1. 父组件中给子组件标签通过@绑定事件
2. 子组件内部通过 emit 方法触发事件
   例子：

const emit = defineEmits(['sendSon'])

image.png image.png

3.模版引用(defineExpose)

通过 ref标识 获取真实的 dom对象或者组件实例对象

基本使用

1. 调用ref函数生成一个ref对象
2. 通过ref标识绑定ref对象到标签
   默认情况下在 <script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法容许访问
   说明：指定setName属性可以被访问到, 如下：
   image.png
   image.png

4.provide和inject

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

image.png

跨层传递普通数据

实现步骤

1. 顶层组件通过 provide 函数提供数据
2. 底层组件通过 inject 函数提供数据
   image.png
   image.png
   image.png