expose - daniel-qa/Vue GitHub Wiki
在 Vue 3 中，expose 是 script setup 的 API，用於明確地向父組件暴露子組件的方法或屬性。這是 Composition API 提供的一種更乾淨的方式，讓父組件只看到需要的接口，而不是直接操作整個組件的實例。
- 為什麼需要 expose？
在 Vue 2 中，我們通常使用 $refs 操作子組件的方法或屬性，但 $refs 是非響應式的，而且會暴露整個組件實例，這可能導致不必要的耦合和不安全的操作。
expose 解決了這個問題，允許子組件選擇性地暴露部分屬性或方法，從而提高了靈活性和安全性。
- 1 . 子組件定義要暴露的內容
使用 expose 將子組件的特定方法或屬性暴露給父組件。
<!-- 子組件 -->
<template>
<div>我是子組件</div>
</template>
<script setup>
function someMethod() {
console.log('這是子組件暴露的方法');
}
const message = '這是暴露的屬性';
expose({
someMethod,
message,
});
</script>
- 2 .父組件訪問暴露的接口
父組件通過 ref 和 ref.value 調用暴露的內容。
<!-- 父組件 -->
<template>
<ChildComponent ref="childRef" />
<button @click="callChildMethod">呼叫子組件方法</button>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const childRef = ref(null);
function callChildMethod() {
console.log(childRef.value.message); // 訪問暴露的屬性
childRef.value.someMethod(); // 呼叫暴露的方法
}
</script>