vue3实现父组件提交校验多个子组件
作者：再希
这篇文章主要为大家详细介绍了vue3如何实现父组件在提交事件中校验多个子组件中的form件,文中的示例代码讲解详细,有需要的小伙伴可以参考一下
实现功能：在父组件提交事件中校验多个子组件中的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].field
formChild.scrollToField(PropName)
errListMsg.value = fields[v][0].message
}
})
reject()
}
})
})
resultArr.push(result)
}
//提交按钮事件
const taskFun = ()=>{
//获取该子组件暴露出来的form 的 ref
const approvalRefChild = approvalRef.value.forms
const 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-table
ref="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-form
ref="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、当发现校验一直不通过时可以查看控制台打印的的结果，看哪个校验没通过
校验不通过
到此这篇关于vue3实现父组件提交校验多个子组件的文章就介绍到这了,更多相关vue3父组件校验多个子组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！