标签：info reactive toRefs 接口 响应 value student 组件

条件： 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。