defineExpose是Vue 3中的一个编译时宏，它用于在单文件组件（SFC）中控制子组件公开的属性和方法。当你想要在父组件中访问子组件内部的方法或数据时，可以使用defineExpose。
以下是一个简单的例子：
子组件 (ChildComponent.vue):
<template>
<div>
<button @click="incrementCounter">Count: {{ counter }}</button>
</div>
</template>
<script>
export default {
setup() {
const counter = ref(0);
function incrementCounter() {
counter.value++;
}
// 使用defineExpose暴露方法
defineExpose({
incrementCounter
});
return { counter };
},
};
</script>父组件:
<template>
<ChildComponent v-if="showChild" @increment="handleIncrement" ref="childRef"/>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
export default {
components: {
ChildComponent
},
setup() {
const showChild = ref(true);
const childRef = ref(null);
function handleIncrement() {
if (childRef.value) {
// 调用子组件的incrementCounter方法
childRef.value.incrementCounter();
}
}
return {
showChild,
childRef,
handleIncrement
};
}
};
</script>在这个例子中，子组件有一个公开的方法incrementCounter，通过defineExpose暴露给父组件。父组件通过ref获取子组件的引用，并可以通过引用调用incrementCounter方法。