首次写vue3+element-plus+ts的项目，提交按钮在父组件，子组件为el-form，提交时校验必填项，在这里卡壳了，所以记录下。废话不多说，上代码。
1、父组件
<template>
<div>
<el-dialog>
<jbxx ref="jbxxFormRef"/>
<yt ref="ytFormRef"/>
</el-dialog>
</div>
<template #footer>
<div class="container">
<el-button
id="save-btn" @click="save()" type="primary">保存
</el-button>
<el-button
id="save-btn" type="primary" @click="submit()">提交
</el-button>
</div>
</template>
</template>
<script lang="ts" setup>
//import处省略
const jbxxFormRef= ref<FormInstance>();
const ytFormRef = ref<FormInstance>();
const submit = async () => {
let flag1 = await jbxxFormRef.value?.validateJdxx();
let flag2 = await ytFormRef.value?.validateYt();
//定义一个数组，将结果添加到数组中，根据结果判断
const arr = [];
arr.push(flag1,flag2);
if(arr.includes(false)){
throw new Error("您有未填写的必填项，请检查！");
}else {
//校验通过的代码
}
}
2、子组件
以基本信息子组件为例
<template>
<div>
<el-form
ref="ruleFormRef"
:rules="jbxxFormRules"
label-width="120px"
:inline="true"
>
<el-row>
<el-col :span="6">
<el-form-item label="姓名" prop="name">
<el-input v-model="jbxxForm.name" class="w-50 m-2" disabled/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="身份证号" prop="zjhm">
<el-input v-model="jbxxForm.zjhm" disabled/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script lang="ts" setup>
//jbxxFormRules处省略
//此处的ruleFormRef 和el-form中的ref="ruleFormRef"保持一直
const ruleFormRef = ref<FormInstance>();
const validateJbxx = async ()=> {
//校验成功则方法自动返回true，校验方法报错则说明校验失败，返回false
try {
return await ruleFormRef.value.validate()
} catch (error) {
return false
}
}
//将方法暴露出去
defineExpose({validateJbxx});
</script>
3、总结
子组件中，在语法糖内定义ref时都必须加泛型FormInstance，这样子组件里调用的validate()方法才是正确的；父组件中同样也要加泛型FormInstance。
不集成TypeScript也能用, 也就是 vue3+js 也能用 换汤不换药
