466 字
2 分鐘
Vue 3 script setup:defineExpose 父子元件之間的溝通

Vue 3 <script setup>
:父子元件之間的溝通
在 Vue 3 的單檔案元件(SFC)中,<script setup>
是一種簡化 Composition API 使用的語法糖。它讓程式碼更簡潔,但同時也改變了父子元件之間溝通的方式。紀錄一下在 <script setup>
模式下,父子元件如何透過 defineExpose
、provide
和 inject
進行資料傳遞與方法呼叫。
子元件向父元件傳遞資料(defineExpose)
在 <script setup>
中,所有定義的變數、函式預設都是私有的,無法直接被父元件取用。要讓父元件能呼叫子元件的方法或屬性,我們需要使用 defineExpose
。
子元件 (ChildComponent.vue)
<script setup>
import { ref, defineExpose } from 'vue';
const childMessage = ref('訊息來自子元件');
const childMethod = () => {
console.log('子元件的方法被呼叫了!');
};
defineExpose({
childMessage,
childMethod
});
</script>
父元件 (ParentComponent.vue)
<template>
<ChildComponent ref="childRef" />
<button @click="callChildMethod">呼叫子元件方法</button>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const childRef = ref(null);
const callChildMethod = () => {
childRef.value.childMethod();
console.log(childRef.value.childMessage);
};
</script>
父元件透過 ref
取得子元件的實例,再透過 .value
訪問 defineExpose
暴露出的屬性或方法。
父元件向子元件傳遞資料(provide/inject)
在 <script setup>
中,可以使用 Vue 3 的 provide
和 inject
來實現父子元件之間的資料傳遞。
父元件 (ParentComponent.vue)
<script setup>
import { provide } from 'vue';
const parentMessage = '訊息來自父元件';
provide('parentMsg', parentMessage);
</script>
子元件 (ChildComponent.vue)
<script setup>
import { inject } from 'vue';
const parentMsg = inject('parentMsg');
console.log(parentMsg);
</script>
父元件透過 provide
提供資料,子元件透過 inject
接收。這種方式不受元件層級限制,只要在 provide/inject 的提供與注入元件之間有祖先/後代關係即可。
總結
在 Vue 3 <script setup>
模式下,父子元件之間的溝通方式有些改變,但透過 defineExpose
、provide
和 inject
,仍然可以實現靈活的資料傳遞和方法呼叫。
Vue 3 script setup:defineExpose 父子元件之間的溝通
https://laplusda.com/posts/vue3-script-setup-component-communication/