vue3使用element plus自定义封装form表单拿不到ref实例无法进行校验问题

vue3使用element plus封装表单拿不到ref实例无法进行校验问题？

<template>
  <ElForm v-bind="$attrs" ref="formRef">
    <template v-for="k in Object.keys(slots)" #[k] :key="k"> <slot :name="k"></slot></template>
  </ElForm>
</template>
<script setup lang="ts">
import { ref, useSlots } from 'vue';
import { ElForm, type FormInstance } from 'element-plus';

const slots = useSlots();
const formRef = ref<FormInstance>();

defineExpose({ formRef });
</script>
<style lang="scss"></style>

 <SFDialog v-model="searchDialogVisible" title="高级筛选" class="searchDialogStyle">
      <SFForm ref="ruleFormRef" :model="ruleForm" :rules="rules">
        。。。需要校验的内容
      </SFForm>
      <template #footer>
        <span class="dialog-footer">
          <!-- <SFFormItem> -->
          <SFButton @click="searchDialogVisible = false">取消</SFButton>
          <SFButton type="primary" @click="onConfirm"> 确认 </SFButton>
          <!-- </SFFormItem> -->
        </span>
      </template>
    </SFDialog>

关键的地方-使用暴露的ref：
// 确认
const onConfirm = async () => {
console.log(‘表单确认’, ruleFormRef.value);
const flag = await ruleFormRef.value.formRef.validate();
if (!flag) return;
// if (!formEl) return;
// formEl.validate((valid) => {
// if (valid) {
// searchDialogVisible.value = false;
// } else {
// console.log(‘error submit!’);
// return false;
// }
// });
};