父组件
<template>
<child
ref="childRef" // 第一步:给每个子组件标签添加ref
>
</child>
<el-button type="primary" @click="save()">Submit</el-button>
</template>
<script setup>
const childRef= ref() // 第二步:声明常量
const save = ()=>{ // 保存事件
const child= childRef.value.ruleFormRef // 第六步:获取子组件暴露出的变量
const childForm = new Promise((resolve, reject) => { // 创建Promise实例,为多个组件校验使用
child.validate((valid, fields) => {
if (valid) {
resolve()
} else {
Object.keys(fields).forEach((v, index) => { // 第七步:通过scrollToField()方法完成校验定位
if (index === 0) {
const propName = fields[v][0].field
child.scrollToField(propName)
}
})
reject()
}
})
})
// 多个子组件校验
Promise.all([childForm])
.then(()=>{
console.log('这里完成接口请求')
})
.catch(err => {
ElMessage({
message: '必填项不能为空',
type: 'error'
})
})
}
</script>
子组件
<template>
<div class="child">
<el-form ref="ruleFormRef" // 第三步:给子组件表单添加ref
:rules="rules.baseInfoRules"
:model="ruleForm"
>
<el-form-item :prop="name">
<el-input v-model="ruleForm.name" />
</el-form-item>
</el-form>
</div >
</template>
<script setup>
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>() // 第四步:声明常量
interface RuleForm {
name: string
}
const rules = reactive<FormRules<RuleForm>>({
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
]
})
const ruleForm= reactive({
name:''
})
defineExpose({ ruleFormRef }) // 第五步:通过defineExpose,将需要的变量与方法都暴露出去
</script>