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

如果你想在父组件中校验多个子组件的表单，可以采用以下步骤：

1. 在父组件中引入 `Form` 组件，并设置 `ref` 属性

<template>
  <div>
    <form ref="form">
      <child-form-1></child-form-1>
      <child-form-2></child-form-2>
      <el-button @click="submitForm">提交</el-button>
    </form>
  </div>
</template>

<script>
import ChildForm1 from './ChildForm1.vue';
import ChildForm2 from './ChildForm2.vue';

export default {
  components: {
    ChildForm1,
    ChildForm2,
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('校验成功');
        } else {
          console.log('校验失败');
        }
      });
    },
  },
};
</script>

2. 在子组件中分别引入 `FormItem` 和 `el-form-item` 组件，并设置 `prop` 属性

<template>
  <div>
    <el-form-item label="姓名" :rules="nameRules">
      <el-input v-model="name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" :rules="ageRules">
      <el-input v-model="age"></el-input>
    </el-form-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: '',
      nameRules: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
      ],
      ageRules: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', message: '请输入数字', trigger: 'blur' },
      ],
    };
  },
  props: {
    prop: String,
  },
};
</script>

3. 在父组件中使用 `$children` 获取所有子组件，并遍历执行表单校验

<template>
  <div>
    <form ref="form">
      <child-form-1 ref="form1"></child-form-1>
      <child-form-2 ref="form2"></child-form-2>
      <el-button @click="submitForm">提交</el-button>
    </form>
  </div>
</template>

<script>
import ChildForm1 from './ChildForm1.vue';
import ChildForm2 from './ChildForm2.vue';

export default {
  components: {
    ChildForm1,
    ChildForm2,
  },
  methods: {
    submitForm() {
      let valid = true;
      this.$children.forEach(child => {
        if (child.$refs[child.prop]) {
          child.$refs[child.prop].validate(valid => {
            if (!valid) {
              valid = false;
            }
          });
        }
      });
      if (valid) {
        console.log('校验成功');
      } else {
        console.log('校验失败');
      }
    },
  },
};
</script>

在这个例子中，我们通过 `$children` 获取所有子组件，并使用 `child.$refs[child.prop]` 获取到子组件中的 `el-form-item`，然后执行 `validate` 方法进行校验。如果校验失败，将 `valid` 设置为 `false`，最终判断 `valid` 是否为 `true` 来判断所有表单校验是否成功。