在 Vue 3 中，defineExpose 是一個用于在組合式 API (Composition API) 中暴露組件內部方法或屬性的函數。它允許父組件通過 ref 引用子組件實例，并調用子組件暴露的方法或訪問其屬性。

以下是子組件和父組件如何使用 defineExpose 和 ref 的詳細解釋和示例。

子組件

子組件通過 defineExpose 來暴露方法，使父組件能夠調用這些方法。

<!-- 子組件 SelectCase.vue -->
<template><a-modal v-model:visible="caseIsVisable"><!-- 模態框內容 --></a-modal>
</template><script setup>
import { ref } from 'vue';const caseIsVisable = ref(false);// 新增，打開模態框
const openModal = () => {caseIsVisable.value = true;
};// 取消，關閉模態框
const handleCancel = () => {caseIsVisable.value = false;
};// 暴露方法給父組件
defineExpose({openModal,handleCancel,
});
</script>

父組件

父組件通過 ref 引用子組件實例，并可以調用子組件暴露的方法。

<!-- 父組件 ParentComponent.vue -->
<template><SelectCase ref="selectCaseRef" :graphInfo="graphInfo" /><button @click="openChildModal">Open Modal in Child</button>
</template><script setup>
import { ref } from 'vue';
import SelectCase from './SelectCase.vue';const graphInfo = ref({}); // 示例數據// 引用子組件實例
const selectCaseRef = ref(null);// 調用子組件方法
const openChildModal = () => {selectCaseRef.value.openModal();
};
</script>

原理解釋

1. 子組件中的 defineExpose:

   • defineExpose 用于將子組件的某些方法或屬性暴露給父組件。在這個例子中，openModal 和 handleCancel 方法通過 defineExpose 暴露。
   • 這樣做的目的是讓父組件能夠調用這些方法來控制子組件的行為，比如打開或關閉模態框。

2. 父組件中的 ref:

   • 在父組件中，通過 ref 引用子組件的實例。使用 ref 可以在父組件中直接訪問子組件的方法和屬性。
   • 例如，const selectCaseRef = ref(null); 創建一個引用來存儲子組件實例。
   • 在模板中，通過 ref="selectCaseRef" 將子組件實例賦值給 selectCaseRef。

3. 調用子組件的方法:

   • 一旦子組件實例被引用到 selectCaseRef，父組件就可以通過 selectCaseRef.value 訪問子組件的暴露方法。
   • selectCaseRef.value.openModal(); 調用子組件的 openModal 方法，從而在子組件中打開模態框。