Vue 3 中的 defineExpose
Vue 3 中的 defineExpose
作用:
1、在 Vue 3 中,<script setup>
默认是封闭的。子组件的内容不会自动暴露给父组件。
2、使用 defineExpose
可以选择性地暴露内部内容,从而避免不必要的属性泄漏,同时提供更好的封装性。
以下是具体的步骤和示例:
子组件 (mainBim.vue)
在子组件中使用 defineExpose
暴露 modelSwitch
方法:
<script setup>
import { ref } from 'vue';
const modelSwitch = () => {
console.log('Model switch called');
// 在这里添加你的逻辑
};
defineExpose({
modelSwitch
});
</script>
父组件
在父组件中通过模板引用(ref)
来调用子组件暴露的方法:
<template>
<div>
<main-bim ref="bimComponent" />
<button @click="callModelSwitch">Call Model Switch</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import MainBim from '@/pages/dashboard/facility/module/mainBim.vue';
const bimComponent = ref(null);
const callModelSwitch = () => {
if (bimComponent.value) {
bimComponent.value.modelSwitch();
}
};
</script>
关键点解释:
1、子组件:
使用 defineExpose
暴露 modelSwitch
方法。
这样父组件可以通过模板引用访问 modelSwitch
方法。
2、父组件:
使用 ref
创建一个对子组件的引用(例如 bimComponent
)。
在需要调用子组件方法的地方(例如按钮点击事件),通过 bimComponent.value.modelSwitch()
调用子组件暴露的方法。
通过这种方式,父组件可以直接调用子组件中通过 defineExpose
暴露的方法。确保在调用之前检查引用是否存在,以避免潜在的错误。