在 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>