VUE3中defineExpose的使用方法

使用 <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。

---