在vue3的<script setup>中使用ref获取子组件的getT方法

在 `<script setup>` 中使用 `ref` 获取子组件的 `getT` 方法可以通过以下步骤实现：

1. 在父组件中，使用 `ref` 给子组件命名：

   <template>
     <child-component ref="child"></child-component>
   </template>

2. 在 `<script setup>` 中使用 `defineExpose` 暴露子组件中需要暴露的属性、方法，并用 `ref` 获取子组件实例：

   <script setup>
     import ChildComponent from './ChildComponent.vue'
     import { defineExpose, ref } from 'vue'

     const childRef = ref(null)

     defineExpose({
       getT: () => {
         return childRef.value.getT()
       }
     })

     return {
       childRef
     }
   </script>

3. 在子组件中，使用 `defineExpose` 暴露需要暴露的属性、方法：

   <script setup>
     import { defineExpose } from 'vue'

     const getT = () => {
       return 'T'
     }

     defineExpose({
       getT
     })
   </script>

4. 在父组件中，调用 `getT` 方法：

   <template>
     <button @click="onClick">{{ childRef.getT() }}</button>
   </template>

   <script setup>
     const onClick = () => {
       console.log(childRef.getT())
     }

     return {
       onClick
     }
   </script>