Vue3 父组件获取子组件的ref

实现一个需求：

父组件使用子组件，子组件里面有一个input元素，父组件挂载时光标聚焦到input内部

子组件使用defineExpose把input dom暴露出去，父组件可以通过$refs.input调用

父组件

<template>
    <div>
        <MyInput ref="myInputRef" />
    </div>
</template>

<script setup>

import { ref, onMounted } from "vue"

onMounted(() => {
    myInputRef.value.$refs.inputRef.focus()
})

</script>

子组件

<template>
    <label>
    {{ label }}
    <input ref="inputRef"/>
    </label>
</template>

<script>
import { ref, defineExpose, toRefs } from "vue"

const props = defineProps(['label'])
const { label } = toRefs(props)
const inputRef = ref(null)

defineExpose({ inputRef })

</script>