Vue3如何将V-Model传递给孙组件（vee-validate Field）

你遇到的核心问题是Vue props的单向数据流限制：子组件不能直接修改props（modelValue），而Field组件的v-model会尝试修改绑定值，直接绑定modelValue.email会触发报错，同时违反单向数据流原则。不需要构建复杂的事件链，用computed属性做一层包装即可解决，以下是修改后的子组件代码：

修改后的子组件代码 #

<template>
  <Field
    type="text"
    name="email"
    v-model="email"
  />
</template>

<script>
import { defineComponent, computed } from 'vue';
import { Field } from 'vee-validate';

export default defineComponent({
  name: "step-2",
  components: {
    Field,
  },
  props: {
    modelValue: {
      type: Object,
      required: true,
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    // 用computed包装email字段，实现双向绑定
    const email = computed({
      get() {
        return props.modelValue.email;
      },
      set(newValue) {
        // 不能直接修改props，所以创建新对象并触发更新事件
        emit('update:modelValue', {
          ...props.modelValue,
          email: newValue
        });
      }
    });

    return { email };
  }
});
</script>

原理说明 #

1. computed的getter：读取父组件传递的modelValue.email值，同步到Field组件；
2. computed的setter：当Field组件更新值时，创建一个新的表单对象（避免直接修改props），通过update:modelValue事件通知父组件更新formData；
3. 父组件的formData是ref对象，接收子组件的更新事件后会自动触发响应式更新，实现从父→子→孙组件的数据流同步。

如果你的表单字段较多，也可以把整个modelValue包装成computed，不过针对单个字段单独处理更灵活。

内容的提问来源于stack exchange，提问作者Ben Krueger