Vue3如何通过v-model实现子组件向祖父组件传值？

你的当前实现是可以正常工作的，但从Vue组件通信的规范性和最佳实践角度，存在可以优化的空间，下面具体拆解说明：

为什么当前代码能运行？ #

因为form是一个引用类型的对象，当你在Company.vue中通过v-model="form.company"修改属性时，本质上是直接修改了Setup.vue中form对象的内部属性——引用类型的特性让这种“跨层级修改”能直接生效，这是代码跑通的核心原因。

但这种写法不符合Vue单向数据流的设计原则：子组件没有通过明确的事件通知父组件状态变更，而是直接修改了父组件传递过来的引用对象，属于“隐式修改”，虽然能工作，但在复杂组件场景下会增加调试难度，不利于维护。

优化方案（两种思路） #

思路1：让组件职责更单一，直接传递单个字段的v-model #

如果Company.vue只负责处理company字段，建议让它直接接收company值并触发更新，这样层级间的数据流更清晰：

修改Company.vue：

<script setup>
import TextInput from "@/Components/TextInput.vue";

// 定义v-model对应的props和emit
defineProps({
  user: {
    type: Object
  },
  modelValue: {
    type: String,
    required: true
  },
})
defineEmits(['update:modelValue'])
</script>

<template>
  <div>
    <TextInput
      id="company"
      type="text"
      class="mt-1 block w-full"
      v-model="$emit('update:modelValue', $event)"
      required
      autofocus
      autocomplete="organization"
    />
  </div>
</template>

修改Setup.vue的使用方式：

<template>
  <Company
    :user="props.user"
    v-model="form.company"
  />
</template>

思路2：如果需要传递整个form对象，实现规范的v-model绑定 #

如果Company.vue需要处理整个form对象的多个字段，应该通过明确的事件来通知父组件更新，而非直接修改引用对象：

修改Company.vue：

<script setup>
import TextInput from "@/Components/TextInput.vue";

const props = defineProps({
  user: {
    type: Object
  },
  form: {
    type: Object,
    required: true
  },
})
const emit = defineEmits(['update:form'])

// 明确触发更新事件，传递新的form对象
const updateCompany = (value) => {
  const newForm = {...props.form, company: value}
  emit('update:form', newForm)
}
</script>

<template>
  <div>
    <TextInput
      id="company"
      type="text"
      class="mt-1 block w-full"
      :value="form.company"
      @input="updateCompany($event.target.value)"
      required
      autofocus
      autocomplete="organization"
    />
  </div>
</template>

此时Setup.vue中的v-model:form就能正确工作，遵循单向数据流原则。

总结 #

当前代码能满足功能需求，但优化后的写法更符合Vue的设计理念，数据流更清晰，也更利于后续的组件扩展和维护。

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