defineExpose方法的使用

defineExpose是Vue3中的一个编译器宏，用于显式指定在组件中哪些属性和方法可以被父组件访问。在使用<script setup>编写组件时，通过defineExpose将需要暴露给父组件的属性和方法进行显式指定，从而避免了在模板引用或者$parent链获取到的组件的公开实例不会暴露任何在<script setup>中声明的绑定的问题。具体使用方法如下：

1.在<script setup>中定义需要暴露给父组件的属性和方法。

2.使用defineExpose方法将需要暴露给父组件的属性和方法进行显式指定。

3.在父组件中通过ref获取子组件实例，并在组件加载完之后访问子组件实例上的属性和方法。

例如，下面是一个使用defineExpose方法的示例代码：

<template>
<div>defineExpose</div>
<child ref="childRef"></child>
</template>

<script setup>
import { ref } from 'vue'
const say = function() {
console.log(8)
}
const count = ref(888)
defineExpose({
say,
count,
})
</script>

<script>
import Child from './child.vue'
export default {
components: {
Child,
},
setup() {
const childRef = ref(null)
onMounted(() => {
// 获取子组件实例上的属性和方法
// 注意一定要在组件加载完之后才能访问到否则是undefined
console.log(childRef.value.count)
console.log(childRef.value.say())
})
return {
childRef,
}
},
}
</script>

<style scoped></style>