vue+element-plus 父组件校验多子组件的form表单

要实现父组件校验多个子组件的表单，可以使用 Vue 的自定义事件和 ref 来实现。

首先，在父组件中，需要在每个子组件上使用 ref 来获取子组件的实例，例如：

<template>
  <div>
    <child-form ref="form1"></child-form>
    <child-form ref="form2"></child-form>
    <button @click="validateForms">校验表单</button>
  </div>
</template>

<script>
import ChildForm from './ChildForm.vue'

export default {
  components: {
    ChildForm
  },
  methods: {
    validateForms() {
      // 获取子组件实例进行校验
      this.$refs.form1.validateForm()
      this.$refs.form2.validateForm()
    }
  }
}
</script>

然后，在每个子组件中，需要定义一个 validateForm 方法，用于校验表单，并通过自定义事件将校验结果传递给父组件，例如：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <!-- 表单项省略 -->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        // 表单数据
      },
      rules: {
        // 表单校验规则
      }
    }
  },
  methods: {
    validateForm() {
      this.$refs.form.validate(valid => {
        // 触发自定义事件，将校验结果传递给父组件
        this.$emit('validate', valid)
      })
    }
  }
}
</script>

最后，在父组件中，需要监听每个子组件的 validate 事件，并将结果存储起来，最终根据所有子组件的校验结果来决定是否通过整个表单的校验，例如：

<template>
  <div>
    <child-form ref="form1" @validate="validations[0] = $event"></child-form>
    <child-form ref="form2" @validate="validations[1] = $event"></child-form>
    <button @click="validateForms">校验表单</button>
  </div>
</template>

<script>
import ChildForm from './ChildForm.vue'

export default {
  components: {
    ChildForm
  },
  data() {
    return {
      validations: []
    }
  },
  methods: {
    validateForms() {
      // 重置校验结果
      this.validations = []

      // 获取子组件实例进行校验
      this.$refs.form1.validateForm()
      this.$refs.form2.validateForm()

      // 判断所有子组件的校验结果是否都为 true
      const isValid = this.validations.every(valid => valid)

      if (isValid) {
        // 表单校验通过
      } else {
        // 表单校验不通过
      }
    }
  }
}
</script>

以上就是实现父组件校验多个子组件的表单的方法。