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

在Vue 3中，可以使用 `v-for` 指令和 `provide/inject` API 来实现父组件校验多个子组件的表单。

首先，在子组件中定义一个表单对象，并且使用 `provide` API将表单对象提供给父组件，例如：

<template>
  <el-form :model="form">
    ...
  </el-form>
</template>
<script>
  import { provide } from 'vue';
  export default {
    data() {
      return {
        form: {
          ...
        }
      }
    },
    mounted() {
      provide('form', this.form);
    }
  }
</script>

然后，在父组件中使用 `v-for` 指令和 `inject` API 获取所有子组件的表单对象，例如：

<template>
  <el-form ref="parentForm">
    <child-form v-for="(item, index) in items" :key="index"></child-form>
    ...
  </el-form>
</template>
<script>
  import { inject } from 'vue';
  export default {
    data() {
      return {
        items: [...]
      }
    },
    methods: {
      validateChildForms() {
        const childForms = this.items.map((item, index) => {
          return inject('form', null, true /* throw error if not found */);
        });
        let isValid = true;
        for (const childForm of childForms) {
          if (!childForm.validate()) {
            isValid = false;
          }
        }
        return isValid;
      }
    }
  }
</script>

上述代码中，子组件在 `mounted` 钩子函数中使用 `provide` API将表单对象提供给父组件，父组件使用 `v-for` 指令渲染多个子组件，并且使用 `inject` API获取子组件的表单对象。然后，在父组件中的 `validateChildForms` 方法中，遍历所有子组件的表单对象进行校验。

需要注意的是，这里使用 `inject` API 的第三个参数为 `true`，表示如果没有找到提供的表单对象，则会抛出错误。如果子组件没有提供表单对象，或者表单对象提供的名称不是 `form`，则会抛出错误。