VUE2用elementUI实现父组件中校验子组件中的表单

需求是VUE2框架用elementUI写复杂表单组件，比如，3个相同功能的表单共用一个提交按钮，把相同功能的表单写成一个子组件，另一个父组件包含子组件的重复调用和一个提交按钮，并且要求提交时校验必填项。

注意：

1.validate函数不传参数就会返回一个promise

2.子组件中写了this.$refs.form?.map...是因为真实项目中el-form是进行了循环的，这里可以自定义修改

3.父组件中要用promise来处理调用子组件的方法

子组件：

<template>   <el-form ref="form" :model="formData" :rules="formRules" label-width="120px">     <el-form-item label="姓名" prop="name">       <el-input v-model="formData.name"></el-input>     </el-form-item>     <el-form-item label="邮箱" prop="email">       <el-input v-model="formData.email"></el-input>     </el-form-item>     <!-- 其他表单项 -->   </el-form> </template>  <script> export default {   data() {     return {       formData: {         name: '',         email: ''         // 其他表单项       },       formRules: {         name: [           { required: true, message: '请输入姓名', trigger: 'blur' }         ],         email: [           { required: true, message: '请输入邮箱', trigger: 'blur' }         ]         // 其他表单项的校验规则       }     };   },   methods: {        validateForm() {       const validatePromises = this.$refs.form?.map(v => {         return v.validate();       });        if (validatePromises) {         return Promise.all(validatePromises)           .then(results => {             // 检查结果数组，如果所有项都是 true，则返回 true，否则返回 false             return results.every(result => result);           })           .catch(() => {             // 如果有任何验证 Promise 失败，则捕获错误             return false;           });       } else {         // 如果 this.$refs.form 不存在，直接返回 false 或抛出错误         return false;       }     }   } }; </script>

 父组件

<template>   <div>     <FormComponent v-for="(ref,index) in formRefs" :key="index" :ref="ref">     </FormComponent>      <el-button type="primary" @click="submitForms">提交</el-button>   </div> </template>  <script> import FormComponent from './FormComponent.vue';  export default {   data() {     return {       formRefs: []     };   },   components: {     FormComponent   },   mounted() {     // 根据需要调用表单的次数，此处假设为10次     for (let i = 0; i < 10; i++) {       this.formRefs.push(`form${i + 1}`);     }   },   methods: {   async onSubmit() {       // 1、pc端:一次性校验所有题       Promise.all(          this.formRefs?.map(v => {           return this.$refs?.[v]?.[0]?.validateForm();         })       )         .then(res => {           if (res?.every(v => v)) {             const formDataList = this.formRefs?.map(v => {               return this.$refs?.[v]?.[0]?.form;             });             // 2、提交问卷             console.log('formDataList', formDataList);           } else {             // 找出所有校验不通过的表单             const falseFormList = res.filter(v => !v);             // TODO 自定义操作           }         })         .catch(() => {           this.$alert('请稍后重试', '提示', {             dangerouslyUseHTMLString: true           });         });     }   } }; </script>