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 暴露的方法。确保在调用之前检查引用是否存在，以避免潜在的错误。
原文地址：https://blog.csdn.net/qq_43730272/article/details/145209103
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！