Vue3 组合式API + Setup语法糖 如何获取组件实例？

Vue3 组合式API + Setup语法糖 如何获取组件实例？

Vue2获取方式

在 Vue2 中，我们可以给组件设置 ref 属性后，就可以直接通过：this.$refs.HelloRef 来获取组件实例中所有的属性和方法

<template>
  <Hello ref="HelloRef" />
</template>

Vue3获取方式

在 Vue3 中，如果采用了组合式API，它是没有 this 的，所以写法与 Vue2 略有不同。我们可以这么做来获取组件中我们想要的数据

App.vue
首先老规矩，在 App.vue 中通过给 Hello.vue 子组件设置 ref 属性来获取子组件向父组件暴露的属性和方法

<template>
  <!-- 1. 给组件设置ref属性 -->
  <Hello ref="HelloRef" />

  <button @click="btn">获取组件实例</button>
</template>

<script lang="ts">
import {
      ref } from 'vue';
import Hello from