VueJS多相同子组件与父组件的数据绑定及验证方案咨询

1. 基础数据双向绑定 #

父组件通过props传递每个子表单的初始数据，子组件接收后维护本地副本，数据变化时同步回父组件：

父组件代码 #

<!-- Parent.vue -->
<template>
  <div>
    <Child 
      v-for="item in list" 
      :key="item.id" 
      :form-data="item.form"
      @update-form="syncChildForm"
    />
    <button v-if="allValid">所有表单验证通过，可提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, form: { name: '', age: '' }, isValid: false },
        { id: 2, form: { name: '', age: '' }, isValid: false }
      ]
    }
  },
  computed: {
    allValid() {
      return this.list.every(item => item.isValid)
    }
  },
  methods: {
    syncChildForm(id, newForm) {
      const targetItem = this.list.find(item => item.id === id)
      if (targetItem) targetItem.form = { ...newForm }
    }
  }
}
</script>

子组件代码 #

<!-- Child.vue -->
<template>
  <div class="child-form">
    <input v-model="localForm.name" placeholder="请输入姓名" />
    <input v-model.number="localForm.age" placeholder="请输入年龄" type="number" />
  </div>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      localForm: { ...this.formData } // 深拷贝避免直接修改props
    }
  },
  watch: {
    localForm: {
      deep: true,
      handler(newVal) {
        this.$emit('update-form', this.formData.id, newVal)
        this.checkValidation() // 数据变化自动触发验证
      }
    }
  },
  mounted() {
    this.checkValidation() // 初始化时验证一次
  },
  methods: {
    checkValidation() {
      // 自定义子表单验证规则，示例：姓名非空、年龄大于0
      const isValid = this.localForm.name.trim() !== '' && this.localForm.age > 0
      this.$emit('validation-change', this.formData.id, isValid)
      return isValid
    },
    // 暴露给父组件的手动验证方法
    validate() {
      return this.checkValidation()
    }
  }
}
</script>

2. 子组件验证状态同步到父组件 #

子组件在数据变化或初始化时执行验证，通过emit将验证状态传递给父组件，父组件更新对应项的验证状态：

父组件添加监听逻辑 #

<!-- Parent.vue -->
<Child 
  v-for="item in list" 
  :key="item.id" 
  :form-data="item.form"
  @update-form="syncChildForm"
  @validation-change="updateValidationStatus"
/>

<script>
export default {
  // ... 其他代码
  methods: {
    // ... 其他方法
    updateValidationStatus(id, isValid) {
      const targetItem = this.list.find(item => item.id === id)
      if (targetItem) targetItem.isValid = isValid
    }
  }
}
</script>

3. 可选优化：批量手动验证 #

如果需要在提交前强制触发所有子组件的验证（比如防止用户未触发输入就提交），可以在父组件中调用子组件的validate方法：

<!-- Parent.vue -->
<script>
export default {
  // ... 其他代码
  methods: {
    async submitAll() {
      // 遍历所有子组件，调用验证方法
      const validationResults = await Promise.all(
        this.$children
          .filter(child => child.$options.name === 'Child')
          .map(child => child.validate())
      )
      if (validationResults.every(res => res)) {
        // 所有验证通过，执行提交逻辑
        console.log('提交所有表单数据:', this.list.map(item => item.form))
      }
    }
  }
}
</script>

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