[Vue3] 자식 컴포넌트 안에 컴포넌트 ref에 접근하기

Child.vue

<script lang="ts" setup>
import { ref, onMounted  } from 'vue'
import { ElForm } from 'element-plus';

const refEl = ref<InstanceType<typeof ElForm> | null>(null)
defineExpose({
    refEl
})

</script>

<template>
    <el-form v-bind="$attrs" ref="refEl">
        <slot></slot>
    </el-form>
</template>

Parent.vue

<script lang="ts" setup>
const submitForm = async (formEl: NeoFormInstance | undefined) => {
  if (!formEl) return
  await formEl.refEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
</script>

<template>
  <neo-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
</template>