vue3父组件提交校验多个子组件

实现功能：在父组件提交事件中校验多个子组件中的form

父组件：

<script setup lang="ts">import {ref, reactive} from 'vue'import childForm from './childForm.vue'import childForm2 from './childForm2.vue'let approvalRef = ref()let approvalRef2 = ref()let resultArr= reactive([])//存放子组件的数组let errListMsg =ref("")//用来存储错误提示//这个方法是固定的，用来创建 Promise 实例，为多个组件校验使用const checkForm = (formChild) =>{let result = new Promise((resolve,reject)=>{formChild.validate((valid,fields)=>{if (valid) {console.log('submit');resolve()}else{console.log('error');Object.keys(fields).forEach((v,index)=>{if (index==0) {const PropName = fields[v][0].fieldformChild.scrollToField(PropName)errListMsg.value = fields[v][0].message}})reject()}})})resultArr.push(result)}//提交按钮事件const taskFun = ()=>{//获取该子组件暴露出来的form 的 refconst approvalRefChild = approvalRef.value.formsconst approvalRefChild2 = approvalRef2.value.ruleFormRef//调用上面创建好的方法checkForm(approvalRefChild)checkForm(approvalRefChild2)Promise.all(resultArr).then((results)=>{console.log('这里是接口请求');//校验通过}).catch(err=>{//校验不通过提示console.log(errListMsg.value);})resultArr=[]//每次请求完要清空数组errListMsg.value=""//提示也需要清空}
</script>
<template><childForm ref="approvalRef"></childForm><childForm2 ref="approvalRef2"></childForm2><button @click="taskFun">提交</button>
</template>

子组件一：

这个是表格可以增删改的情况，对表格添加输入校验

<script setup lang="ts">import {ref, reactive} from 'vue'import type { FormInstance } from 'element-plus'const forms = ref<FormInstance>()let info:any = reactive({data:[{name:'1'}]})const formRules = reactive({name: [{ required: true, message: '请输入姓名', trigger: 'change' }],role: [{ required: true, message: '请选择', trigger: 'blur' }]})defineExpose({forms})
</script>
<template><el-form :model="info" ref="forms"><el-tableref="tableRef":data="info.data"border><el-table-column align="center" property="name" label="*姓名"><template #default="{row,$index}"><el-form-item :prop="`data[${$index}].name`" :rules="formRules.name"><el-input placeholder="请输入姓名" v-model="info.data[$index].name" /></el-form-item></template></el-table-column><el-table-column align="center" property="role" label="角色"><template #default="{row,$index}"><el-form-item :prop="`data[${$index}].role`" :rules="formRules.role"><el-input placeholder="请输角色" v-model="info.data[$index].role" /></el-form-item></template></el-table-column></el-table></el-form>
</template>

子组件二：

这个是普通的form表单情况

<template>第二个组件<el-formref="ruleFormRef":model="ruleForm":rules="rules"label-width="120px"class="demo-ruleForm":size="formSize"status-icon><el-form-item label="Activity name" prop="name"><el-input v-model="ruleForm.name" /></el-form-item></el-form></template><script lang="ts" setup>import { reactive, ref } from 'vue'import type { FormInstance, FormRules } from 'element-plus'interface RuleForm {name: string}const formSize = ref('default')const ruleFormRef = ref<FormInstance>()const ruleForm = reactive<RuleForm>({name: 'Hello'})const rules = reactive<FormRules<RuleForm>>({name: [{ required: true, message: '请输入Activity name', trigger: 'blur' },{ min: 3, max: 5, message: '长度再3-5位', trigger: 'blur' },]})defineExpose({ruleFormRef})</script>

注意：

1、子组件中的form要添加ref属性，并使用defineExpose暴露出去，这样父组件才能获取到子组件中的ref，才能进行校验

2、当对表格输入内容做校验时prop和v-model绑定的是同一个才能校验通过

3、当发现校验一直不通过时可以查看控制台打印的的结果，看哪个校验没通过

校验不通过