Vue 3V-传递给孙子组件的模型
Vue 3V-传递给孙子组件的模型
提问于 2022-10-16 14:56:12
我有三个组件，我想通过父->子->孙子传递一个反应模型(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模型的支柱，所以我不确定是否有一系列的事件或者重组需要做的子modelValue？
回答 2
Stack Overflow用户
发布于 2022-10-16 15:06:42
最后，我在子组件中使用了以下解决方案：
<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);
},
},
},
},
});Stack Overflow用户
发布于 2022-10-16 15:32:04
当子组件是直通组件时，可以使用desugared语法代替v-model向两个方向传递数据：
<child v-model="formData.email" />和
<Field
type="text"
name="email"
:modelValue="modelValue"
@update:modelValue="$emit("update:modelValue", $event)"
/>如果有多个字段需要更新，那么在子级和父级中放弃v-model约定并使用自己的事件来修补父状态可能更方便：
<Field
type="text"
name="email"
:modelValue="formData.email"
@update:modelValue="$emit('updateFormData', { email: $event })"
/>然后，在父类中，Object.assign(formData, event)在updateFormData上执行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74088110
复制相关文章
相似问题
腾讯云开发者
