父组件 通过 子组件暴露接口响应式修改子组件数据

条件： vue setup 

本方法是通过：

一、子组件将所要的数据，暴露出动态响应接口。

二、父组件动态响应接收接口，并直接修改，影响子组件。

组件test.vue代码：

<template>
    <view>姓名：{{student.name}}</view>
    <view>年龄：{{student.age}}</view>
    <view>手机：{{student.contact.phone}}</view>
    <view>企鹅：{{student.contact.qq}}</view>
    <view>邮箱：{{student.contact.email}}</view>
    <view>学生数量：{{studentNumber}}</view>
</template>

<script setup>
    import {
        ref,
        reactive,
        toRefs
    } from 'vue'

    var student = reactive({
        name: '张三',
        age: 15,
        contact: {
            phone: '18714896998',
            qq: '103422412',
            email: 'wm218@qq.com'
        }
    })
    
    var studentNumber = ref(20)

    defineExpose({
        // ...student, 如果采用这种方式展开，暴露出的数据将不会同步
        ...toRefs(student), // 必需要通过toRefs数据才能同步
        studentNumber // 这里的数据可以同步
    })
</script>

父组件修改数据，子组件同步响应示例：

<template>
    <test ref="student"></test>
</template>

<script setup>
    import {
        ref,
        toRef,
        toRefs,
        reactive,
        onMounted
    } from 'vue'

    // 获取组件实例，必需在setup内才能获取
    let student = ref(null);
    var info

    // 获取组件值，必需要挂载完成之后才能获取
    onMounted(() => {
        // 延迟5秒查看变化
        setTimeout(() => {
            // 这里有二个细节：
            // 1. 获取组件对外暴露接口，采用 student._value 方式
            // 2. 必需定义成动态响应式的(toRefs或toRef转换)，否则暴露的数据为只读
            //    info = reactive({...student._value}) 这种方式也不行
            info = {
                ...toRefs(student._value) //将组件值扩展开，并是响应式的
            }
            info.studentNumber.value = 50 // 修改此处，将会同步更新到组件
            info.name.value = '李四' // 修改此处，将会同步更新到组件
        }, 5000)
    });
</script>

标签：info,reactive,toRefs,接口,响应,value,student,组件
来源： https://www.cnblogs.com/wm218/p/16688314.html