我已经使用 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 值进行更新。任何帮助或指导将不胜感激。
当你解构 props 时,它们是这样编译的:
const test = ref({
companyId: __props.companyId
});
因此
__props.companyId
表达式是反应性的,但是当您像这样分配它时,您会分配原始值并且反应性会丢失。
使用另一种方式来保留反应性,如
computed
,如下所示:Playground