Vue3中的defineExpose作用及使用方式作用：暴露数据或者方法供父组件使用，数据不会丢失响应式功能子组建：

作用：暴露数据或者方法供父组件使用，数据不会丢失响应式功能

使用 <script setup> 的组件是默认关闭的————即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露在任何在 <script setup> 中声明的绑定

换句话说，如果一个子组件使用的是选项式 API 或没有使用 <script setup> ，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。

但是如果使用了 <script setup> 的组件，这种组件是默认私有的，也就是一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露：

子组建：

<script setup lang="ts">
import { ref,defineExpose } from 'vue'
 
let age = ref(18)
 
defineExpose({
  age
})
</script>

父组件

<script lang="ts" setup>
import {ref} from 'vue'
import Person from './components/Person.vue'
 
let person = ref()
 
setTimeout(()=>{
  console.log(person.value.age);  // 18
},1000)
 
</script>
 
<template>
  <Person ref="person"/>
</template>