在 Vue 3 中，`defineExpose`是一个在`<script setup>`语法中使用的函数，它的主要作用是用于显式地暴露组件内部的属性和方法，以便在父组件中可以通过`ref`获取并访问这些属性和方法。
一、作用
1. 控制组件的对外暴露内容
在默认情况下，使用`<script setup>`的组件会自动暴露其内部定义的所有顶级变量和函数。但有时候，你可能只想暴露特定的属性和方法，而不是全部。这时就可以使用`defineExpose`来明确指定哪些内容应该被暴露给外部。
例如：如果一个子组件有很多内部方法，但只有几个特定的方法需要被父组件调用，使用`defineExpose`可以确保只有这些特定的方法被暴露出去，提高了组件的封装性。
2. 方便父组件与子组件进行交互
父组件可以通过给子组件添加`ref`属性，然后在父组件中使用这个`ref`来访问子组件暴露出来的属性和方法。这样可以实现父组件对子组件的特定操作和数据获取，促进了组件之间的通信和协作。
二、用法示例
1. 子组件中使用`defineExpose`
<script setup>
import { ref } from "vue";
const count = ref(0);
const increment = () => {
count.value++;
};
// 使用 defineExpose 暴露需要被父组件访问的属性和方法
defineExpose({
count,
increment,
});
</script>2. 父组件中访问子组件暴露的内容
<script setup>
import { ref } from "vue";
import ChildComponent from "./ChildComponent.vue";
const childRef = ref(null);
const callChildMethod = () => {
if (childRef.value) {
childRef.value.increment();
console.log(childRef.value.count);
}
};
</script>
<template>
<ChildComponent ref="childRef" />
<button @click="callChildMethod">调用子组件方法</button>
</template>总结：`defineExpose`在 Vue 3 的`<script setup>`语法中提供了一种灵活的方式来控制组件的对外暴露内容，增强了组件的封装性和可维护性，同时也方便了组件之间的交互。