前言

其基本知識可參考官網(wǎng)：Vue3中的defineExpose

1. 基本知識

defineExpose 是 Vue 3 的 Composition API 中一個新的實用函數(shù)，用于在 <script setup> 語法下顯式暴露組件的公共屬性和方法

這在處理子組件時特別有用，允許父組件訪問子組件的特定屬性或方法

在 Vue 3 中，當我們使用 <script setup> 語法糖時，組件默認不會自動暴露內(nèi)部的任何狀態(tài)或方法給外部使用，為了顯式暴露某些屬性或方法，可以使用 defineExpose

示例Demo如下：

<script setup>
import { ref } from 'vue'const a = 1
const b = ref(2)defineExpose({a,b
})
</script>

當父組件通過模板引用的方式獲取到當前組件的實例，獲取到的實例會像這樣 { a: number, b: number } (ref 會和在普通實例中一樣被自動解包)

2. Demo

1. 父組件渲染子組件 Child 并通過 ref 獲取子組件的實例。
2. 子組件中的 count 和 increment 方法通過 defineExpose 暴露出來。
3. 當點擊父組件中的 “Access Child Methods” 按鈕時，父組件可以訪問并調(diào)用子組件的 count 和 increment

子組件：

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { ref } from 'vue';const count = ref(0);function increment() {count.value++;
}// 使用 defineExpose 來暴露 count 和 increment
defineExpose({count,increment,
});
</script>

父組件：

<template><div><Child ref="childRef" /><button @click="accessChild">Access Child Methods</button></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import Child from './Child.vue';const childRef = ref(null);function accessChild() {if (childRef.value) {console.log('Current count:', childRef.value.count);childRef.value.increment();console.log('Count after increment:', childRef.value.count);}
}onMounted(() => {if (childRef.value) {console.log('Child component mounted, initial count:', childRef.value.count);}
});
</script>

總的來說：

• defineExpose 用于在 <script setup> 中顯式暴露組件內(nèi)部狀態(tài)和方法
• 父組件可以通過 ref 訪問子組件實例并調(diào)用暴露的屬性和方法
• 使用 defineExpose 可以讓組件更加模塊化和可控，只有顯式暴露的部分才能被外部訪問，增強了封裝性和安全性

這個功能在組件之間需要進行復雜交互時特別有用，尤其是在大型項目中，能夠顯著提升代碼的可讀性和可維護性

3. 實戰(zhàn)

也可通過函數(shù)進行暴露

<template><div><button @click="open">Fetch Data</button><div v-if="detailLoading">Loading...</div><div v-else><div v-for="item in detailData.attachment1" :key="item">{{ item }}</div><div v-for="item in detailData.attachment2" :key="item">{{ item }}</div></div></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import DangerousWorkApi from '@/api/DangerousWorkApi'const detailLoading = ref(false)
const detailData = ref({})
const props = defineProps(['id'])
const queryId = 'some-query-id'const getInfo = async () => {detailLoading.value = truetry {detailData.value = await DangerousWorkApi.getDangerousWork(props.id || queryId)const attachment1 = detailData.value.attachment1;const attachment2 = detailData.value.attachment2;detailData.value.attachment1 = attachment1.split(",");detailData.value.attachment2 = attachment2.split(",");} finally {detailLoading.value = false}
}defineExpose({ open: getInfo })onMounted(() => {getInfo()
})
</script>