vue-composition-api 中的 Refs 方法

Posted 2023-02-22

【中文标题】vue-composition-api 中的 Refs 方法

【英文标题】：Refs methods in vue-composition-api

【发布时间】：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>

demo

【讨论】：

查看demo 和普通的ref。

Vue 3 从vue 导出ref。另外，Vue 2 不支持<script setup>。

@OmriCohen 支持 setup() 钩子，而不是 Vue 2 中模板的 <script setup>。