vue3父组件对多个子组件校验、校验定位方法

父组件

<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>