vue-composition-api 中的 Refs 方法

【问题标题】：Refs methods in vue-composition-apivue-composition-api 中的 Refs 方法
【发布时间】：2022-01-19 15:28:30
【问题描述】：

有一个组件的引用是这样的：

<template>
  <custom-component
     ref="func"
  />
</template>

<script setup>
const func = ref();
</script>

在组件内部有这样一个函数：

const helloWorld = () => {
    console.log('hello World');
}

如何从父组件获得对 helloWorld 函数的访问权限？

【问题讨论】：

【解决方案1】：

假设您的子组件也使用<script setup>，则组件的定义默认是关闭的（不公开）。

您可以在子组件中手动公开带有defineExpose的方法：

// CustomComponent.vue
<script setup>
const helloWorld = /*...*/

defineExpose({
  helloWorld
})
</script>

【讨论】：