【Vue3】defineExpose 實(shí)踐

defineExpose 是 Vue 3 的 <script setup> 語法糖中提供的一個(gè)函數(shù)，用于顯式地暴露組件的屬性、方法或其他響應(yīng)式狀態(tài)給其父組件或外部使用。這是在使用 <script setup> 語法時(shí)，控制組件公開哪些內(nèi)部狀態(tài)和方法的一種方式。

在 Vue 3 的 <script setup> 中，默認(rèn)情況下，組件內(nèi)部定義的變量、方法等都不會(huì)被自動(dòng)暴露給外部。這意味著，如果你想在父組件中通過模板引用（template refs）或其他方式訪問子組件的方法或狀態(tài)，你需要使用 defineExpose 來明確指明哪些是可被外部訪問的。

使用示例

假設(shè)你有一個(gè)子組件，它有一個(gè)方法 resetForm 和一個(gè)狀態(tài) count，你希望這個(gè)方法和狀態(tài)能在父組件中被直接訪問。你可以使用 defineExpose 來實(shí)現(xiàn)這一點(diǎn)：

<script setup>
import { ref } from 'vue'const count = ref(0)function increment() {count.value++
}function resetForm() {console.log('Form has been reset.')
}// 使用 defineExpose 顯式暴露屬性和方法
defineExpose({resetForm,count
})
</script>

在父組件中，如果你使用了上述子組件，并且想要在某個(gè)事件（比如點(diǎn)擊一個(gè)按鈕）時(shí)調(diào)用子組件的 resetForm 方法或訪問 count 狀態(tài)，你可以這樣做：

<template><ChildComponent ref="childComp" /><button @click="resetChildForm">Reset Form in Child</button><button @click="logChildCount">Log Child Count</button>
</template><script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'const childComp = ref(null)function resetChildForm() {childComp.value.resetForm()
}function logChildCount() {console.log(childComp.value.count)
}
</script>

這里，ChildComponent 的 resetForm 方法和 count 狀態(tài)被通過 defineExpose 暴露出去，因此父組件可以通過對(duì)子組件的引用 (childComp) 直接訪問它們。

注意事項(xiàng)
defineExpose 僅在使用 <script setup> 語法時(shí)可用。
它提供了一種顯式的方式來定義哪些內(nèi)部狀態(tài)或方法可以被外部訪問，有助于提高代碼的可維護(hù)性和可讀性。
如果你沒有使用 <script setup> 語法，而是使用了傳統(tǒng)的 <script> 方式定義組件，那么組件的方法和屬性可以通過在組件實(shí)例上定義來直接暴露給外部使用，不需要 defineExpose。