子组件 ref() 中 Prop 未定义

Question

我已经使用 Vue 大约 7 年了，但对 Vue 3 Composition API 还很陌生。

当我尝试在

undefined

对象中访问它时，我遇到了 prop 值为

ref

的问题。

父组件：

<template>
    <NewTermsModal :company-id="companyId"></NewTermsModal>
</template>

<script setup>
    import { ref } from 'vue';

    const { companyId } = defineProps({
        companyId: {
            type: Number,
            required: true
        }
    });
</script>

父组件中的

companyId

也是传入的 prop，并填充了正确的 id。

子组件（NewTermsModal.vue）

<script setup>
    import { ref } from 'vue';

    const { show, companyId } = defineProps({
        show: {
            type: Boolean,
            required: true,
            default: false
        },
        companyId: {
            type: Number,
            required: true 
        }
    });

    var form = new ref({
        name: null,
        companyId: companyId
    });

    async function createNewTerms() {
        console.log(form.value.companyId); // THIS IS UNDEFINED
    });
</script>

在子组件函数

createNewTerms()

中，

form.value.companyId

是

undefined

。但是，如果我记录 prop 本身的值

console.log(companyId)

，它包含正确的值。

我不确定为什么我的反应式表单对象没有使用 prop 值进行更新。任何帮助或指导将不胜感激。

Answer 1

当你解构 props 时，它们是这样编译的：

const test = ref({
  companyId: __props.companyId
});

因此

__props.companyId

表达式是反应性的，但是当您像这样分配它时，您会分配原始值并且反应性会丢失。

使用另一种方式来保留反应性，如

computed

，如下所示：Playground