摘要

defineExpose 是一個只能在 <script setup> 中使用的宏，它允許子元件明確地指定哪些屬性或方法可以被父元件透過模板引用 (ref) 來存取。

定義與說明

預設情況下，使用 <script setup> 的元件是封閉的，父元件無法存取其任何內部狀態。defineExpose 打破了這個封閉性，它接收一個物件，該物件中定義的所有內容都將被暴露到該元件的公開實例上。

實作範例

Vue SFC

<!-- ChildComponent.vue -->
<script setup>
import { ref } from 'vue';

const internalCount = ref(0);

function reset() { 
  internalCount.value = 0; 
}

// 只暴露 reset 方法
defineExpose({ reset });
</script>

<!-- ParentComponent.vue -->
<script setup>
import { ref } from 'vue';

const child = ref(null);

function callReset() {
  // 父元件可以呼叫子元件暴露的 reset 方法
  child.value.reset();
}
</script>

<template>
  <ChildComponent ref="child" />
  <button @click="callReset">重設子元件</button>
</template>

結論

defineExpose 是在 <script setup> 環境下，實現父元件對子元件命令式控制的標準方式。它提供了比傳統選項式 API 更精確的暴露控制。

defineExpose 暴露控制父子通訊