我有三个组件，我想从父级 -> 子级 -> 孙级（vee-validate 字段）向下传递响应式模型。
所以父组件看起来像：
<template>
<child v-model="formData" />
</template>
.
.
.
setup() {
const formData = ref<CreateAccount>({
email: "",
firstName: "",
lastName: ""
});
return {
formData,
};
}
子组件（带有孙组件）看起来像：
<template>
<Field
type="text"
name="email"
v-model="modelValue.email" ????
/>
</template>
export default defineComponent({
name: "step-2",
components: {
Field,
},
props: {
modelValue: {
type: Object,
required: true,
},
},
emits: ["update:modelValue"],
},
});
现在我的问题是，我不能只将 modelValue 传递给 Field v-model 属性，所以我不确定是否存在一系列事件或需要重构子 modelValue？
我最终在我的子组件中使用了以下解决方案：
<template> <Field type="text" name="email" v-model="model.email" /> </template> export default defineComponent({ name: "step-2", components: { Field, }, props: { modelValue: { type: Object, required: true, }, }, computed: { model: { get() { return this.modelValue; }, set(value) { this.$emit("update:modelValue", value); }, }, }, }, });