在 Vue 3 中，defineExpose 是一個(gè)用于在組合式 API (Composition API) 中暴露組件內(nèi)部方法或?qū)傩缘暮瘮?shù)。它允許父組件通過 ref 引用子組件實(shí)例，并調(diào)用子組件暴露的方法或訪問其屬性。

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

子組件

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

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

父組件

父組件通過 ref 引用子組件實(shí)例，并可以調(diào)用子組件暴露的方法。

<!-- 父組件 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({}); // 示例數(shù)據(jù)// 引用子組件實(shí)例
const selectCaseRef = ref(null);// 調(diào)用子組件方法
const openChildModal = () => {selectCaseRef.value.openModal();
};
</script>

原理解釋

1. 子組件中的 defineExpose:

   • defineExpose 用于將子組件的某些方法或?qū)傩员┞督o父組件。在這個(gè)例子中，openModal 和 handleCancel 方法通過 defineExpose 暴露。
   • 這樣做的目的是讓父組件能夠調(diào)用這些方法來控制子組件的行為，比如打開或關(guān)閉模態(tài)框。

2. 父組件中的 ref:

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

3. 調(diào)用子組件的方法:

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