【Vue3】defineExpose 實踐

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

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

使用示例

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

<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>

在父組件中，如果你使用了上述子組件，并且想要在某個事件（比如點擊一個按鈕）時調用子組件的 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 暴露出去，因此父組件可以通過對子組件的引用 (childComp) 直接訪問它們。

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