vue3中的defineExpose

defineExpose是一个编译宏，用于在Vue 3的`<script setup>`组件中显式地指定要暴露出去的属性。在子组件中，我们可以使用defineExpose来将需要暴露给父组件的属性或方法定义为一个对象。

在子组件的`<script setup>`块中，我们可以通过调用defineExpose函数，并将需要暴露的属性和方法作为参数传递给它。然后，父组件就可以通过子组件实例的`.value`属性来访问这些暴露出来的属性和方法。

下面是一个示例，展示了在子组件中使用defineExpose来暴露属性和方法给父组件：

<template>
  <div>child</div>
</template>

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

const a = ref(2)

const loadList = (item: any) => {
  // 函数体
  console.log(item)
}

defineExpose({ a, loadList })
</script>

在父组件中，我们可以通过使用子组件的`ref`来获取子组件实例，并使用`.value`来访问暴露的属性和方法。例如：

<template>
  <child ref="son"></child>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const son = ref()

    onMounted(() => {
      console.log(son.value.a)
      son.value.loadList('example')
    })
  }
}
</script>