Vuetify3子组件向父组件传递输入值失败问题排查

1. 修复自定义TextField组件的双向绑定逻辑 #

封装v-text-field时，必须严格遵循Vue的v-model双向绑定规则，因为Vuetify组件的输入事件触发逻辑和原生input有差异，需正确传递值并触发对应事件：

Vue 2 实现示例 #

<!-- 自定义TextField组件 -->
<template>
  <v-text-field
    :value="value"
    @input="$emit('input', $event)"
    <!-- 其他自定义属性（如label、placeholder等） -->
  ></v-text-field>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  }
}
</script>

Vue 3 实现示例 #

<!-- 自定义TextField组件 -->
<template>
  <v-text-field
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    <!-- 其他自定义属性 -->
  ></v-text-field>
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})
defineEmits(['update:modelValue'])
</script>

2. 父组件循环绑定的正确性验证 #

确保父组件中循环渲染时，v-model绑定的是formValues的具体属性，而非错误的对象引用：

<!-- 父组件 -->
<template>
  <div v-for="field in formFields" :key="field.id">
    <TextField
      v-model="formValues[field.key]"
      :label="field.label"
    />
  </div>
</template>

<script>
import TextField from './TextField.vue'
import formData from './data.json'

export default {
  components: { TextField },
  data() {
    return {
      formFields: formData.fields,
      formValues: { ...formData.initialValues } // 解构确保对象可响应
    }
  }
}
</script>

3. 排查常见失效原因 #

• 确认data.json中的initialValues是普通可响应对象，避免使用Object.freeze或深层不可变结构。
• 检查自定义组件中是否误将v-text-field的value/model-value绑定为固定值，而非props传入的对应属性。
• 循环渲染时使用字段的唯一标识（如field.id）作为key，避免用index导致组件实例复用引发的值错乱。

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