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 暴露的方法。确保在调用之前检查引用是否存在，以避免潜在的错误。