Vue组件中结合Props与v-for实现根组件数据双向绑定

先提个小细节：你根组件里给子组件传的prop是parentsForm，但子组件定义的prop是parentForm（多了个s），这会导致子组件接收不到父组件的数据，得先把这个命名统一了。

接下来咱们一步步实现你要的双向绑定效果：

1. 修正Prop命名不匹配的问题 #

把根组件里的child标签修改成这样，确保prop名称和子组件定义的一致：

<child :parentForm="form"></child>

2. 子组件中正确绑定父组件的form.data #

你想的思路是对的，直接用v-model="parentForm.data[input.name]"就能绑定到父组件对应字段，因为父组件传递的form是对象类型，Vue允许修改对象内部的属性（这不算修改prop本身的引用，符合单向数据流规则）。只要子组件form.inputs里的name值和父组件form.data的属性名完全对应，就能实现双向同步。

修改后的子组件完整代码：

子组件HTML #

<div v-for="(input, index) in form.inputs" :key="index">
  <div>
    <input 
      :name="input.name" 
      :type="input.type" 
      v-model="parentForm.data[input.name]" 
    />
  </div>
</div>

子组件JS #

<script>
export default {
  name: "child",
  props: ['parentForm'], // 和父组件传递的prop名称保持一致
  data() {
    return {
      form: {
        inputs: [
          { name: 'name', type: 'text' },
          { name: 'email', type: 'email' }, // 这里的name要和父组件form.data里的属性一一对应
          // ...其他输入项配置
        ]
      }
    }
  }
}
</script>

3. 验证双向绑定效果 #

现在你在子组件输入框里输入内容，根组件的form.data.name、form.data.email会自动同步更新；反过来如果根组件修改这些数据，子组件的输入框也会实时显示最新值，完全符合你的需求。

如果后续你想更严谨地控制数据流（比如避免直接修改prop内部属性），也可以通过子组件触发自定义事件，父组件监听事件来更新数据，但当前场景下直接修改对象子属性是最简单且合规的做法，因为我们没有改变parentForm这个prop本身的引用。

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