摘要

props 是實現「父元件」向「子元件」單向傳遞資料的最主要方式。父元件可以透過屬性綁定的形式，將資料傳遞給子元件。

定義與說明

Props (Properties 的縮寫) 是在子元件上自訂的屬性。父元件可以像傳遞普通 HTML 屬性一樣，將動態或靜態的資料傳遞到這些 props 上。在子元件內部，可以像存取自身資料一樣存取這些 props。資料流是單向的：只能從父傳到子，子元件不應該直接修改 props。

實作範例

ParentComponent.vue (父元件)

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const greetingMessage = ref('來自父親的問候');
</script>

<template>
  <!-- 使用屬性綁定將資料傳遞給子元件的 message prop -->
  <ChildComponent :message="greetingMessage" />
</template>

ChildComponent.vue (子元件)

<script setup>
// 使用 defineProps 來聲明接收一個名為 'message' 的 prop
const props = defineProps(['message']);
</script>

<template>
  <h2>{{ props.message }}</h2>
</template>

結論

props 是構建元件樹資料流的基礎。它遵循清晰的「單向資料流」原則，讓應用的狀態變化更易於追蹤和理解。

props 單向資料流父子通訊