Vue嵌套组件中对象Prop的v-model无法正常更新问题求助

看起来你已经走对了大部分路子，但嵌套组件的响应式同步确实容易在细节上踩坑。我来帮你梳理下问题所在，以及具体的修复方案：

核心问题分析 #

你的代码框架是对的，但可能卡在两个点：

1. 初始化的fieldset.value没有被Vue的响应式系统完全追踪到
2. 嵌套层级的v-model事件传递没有完全打通

分步修复方案 #

1. 确保Form组件中的数据是完全响应式的 #

你用_.cloneDeepWith做了深克隆，但克隆后的对象可能没有被Vue的响应式系统包裹。在Vue2中需要用Vue.observable，Vue3则用reactive来确保对象的所有属性变更都能被检测到：

Vue2版本

created() {
  // 深克隆后转为响应式数组
  this.form.fieldsets = Vue.observable(_.cloneDeepWith(this.fieldsets));
  this.form.fieldsets.forEach(fieldset => {
    // 给每个fieldset初始化响应式的value对象
    fieldset.value = Vue.observable({});
    fieldset.fields.forEach(field => {
      fieldset.value[field.name] = field.value;
    })
  })
}

Vue3版本

import { reactive } from 'vue';

created() {
  this.form.fieldsets = reactive(_.cloneDeepWith(this.fieldsets));
  this.form.fieldsets.forEach(fieldset => {
    fieldset.value = reactive({});
    fieldset.fields.forEach(field => {
      fieldset.value[field.name] = field.value;
    })
  })
}

2. 修正Fieldset组件的v-model绑定逻辑 #

你的计算属性思路没问题，但要注意Vue版本的v-model事件差异：

• Vue2中，组件v-model默认监听input事件，接收value prop
• Vue3中，组件v-model默认监听update:modelValue事件，接收modelValue prop

Vue2的Fieldset组件

computed: {
  collectedValue: {
    get() { return this.value },
    set(newValue) { 
      // 触发Vue2默认的v-model更新事件
      this.$emit('input', newValue); 
    }
  }
}

模板中要注意：遍历的是props传入的fields（不是fieldset.fields，因为你已经通过v-bind="fieldset"把字段数据传到props里了）

<vue-input 
  v-for="field in fields" 
  :key="field.name" 
  v-model="collectedValue[field.name]" 
  v-bind="field"
/>

Vue3的Fieldset组件

computed: {
  collectedValue: {
    get() { return this.modelValue },
    set(newValue) { 
      this.$emit('update:modelValue', newValue); 
    }
  }
},
emits: ['update:modelValue'] // 显式声明触发的事件

3. 确保Field组件的v-model实现正确 #

你的vue-input组件必须正确实现v-model的双向绑定逻辑，以Vue2为例：

// vue-input组件
export default {
  props: ['value', 'name', 'label'],
  methods: {
    handleInput(event) {
      // 触发input事件，把新值传递给父组件
      this.$emit('input', event.target.value);
    }
  }
}

模板：

<div class="field">
  <label>{{ label }}</label>
  <input :value="value" @input="handleInput" />
</div>

4. 调试验证（可选） #

如果还是有问题，可以添加watch来追踪数据变化，定位哪一层没同步：

// 在Form组件中添加
watch: {
  'form.fieldsets': {
    handler(newVal) {
      console.log('表单数据更新:', newVal);
    },
    deep: true
  }
}

总结 #

只要确保每一层的对象都是响应式的，并且v-model的prop和事件传递正确，嵌套组件的对象型数据就能完美同步。简单来说就是：

• 给所有需要变更的对象套上响应式外衣（observable/reactive）
• 每一层组件都正确实现v-model的双向绑定逻辑

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