vue3中通过ref调用子组件

在 vue3 <script setup> 中 使用 ref,如何获取到子元素,并调用方法

// 父组件
<template>
    <div class="app-container">
        <!-- 子组件 -->
        <seed ref="Refseed"></seed>
    </div>
</template>

<script setup>
import seed from './seed.vue'
import {nextTick, ref} from 'vue'

// 定义一个对象关联上子组件的 ref 值（注意：这里的属性名必须跟子组件定义的 ref 值一模一样，否者会关联失效）
const Refseed = ref(null)

// 延迟使用，因为还没有返回跟挂载
nextTick(() => {
    Refseed.value.show()
})

</script>

<script>

</script>

// 子组件
<template>
    <div>
        子组件
    </div>
</template>

<script setup>

function show() {
    console.log('子组件的show方法')
}
// 要通过 defineExpose 暴露给父组件,否则会引起报错
// 报错: Refseed.value.show is not a function
defineExpose({show})

</script>