使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性
官网传送门
在vue3的setup中，组件默认是关闭的，对一个子组件使用ref，不能获取任何在 <script setup> 中声明的绑定。
defineExpose是编译宏，用于显式地指定在 <script setup> 组件中要暴露出去的属性。如下示例
父组件
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import ChildComponent from '@/views/articles/ChildComponent.vue'
const childeRef = ref()
onMounted(() => {
childeRef.value.loadList([{ id: 1, name: '22' }]) // 调用子组件函数
})
</script>
<template>
<ChildComponent ref="childeRef"></ChildComponent>
</template>
子组件
<script setup lang="ts">
import { ref } from 'vue'
const a = ref(2)
const loadList = (item: any) => {
// 函数体
console.log(item)
}
defineExpose({
a,
loadList
})
</script>
<template>
<div>child</div>
</template>
子组件defineExpose暴露响应式数据a和方法loadList，父组件ref获取子组件实例可以调用当前子组件暴露出来的数据a和方法loadList。
