彻底搞清楚vue3的defineExpose宏函数是如何暴露方法给父组件使用
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
方法。
评论已关闭