2024-11-24 vue 之 什麼是props ?

發表於 分類於 閱讀次數：
2024-11-24 vue 之 什麼是props ?

2024-11-24 vue 之 什麼是props ?

什麼是 Props？

在 Vue 中，**props（屬性）** 是父組件用來向子組件傳遞數據的一種機制。
父組件可以透過 props 把數據或參數傳遞給子組件，子組件可以通過聲明 props 來接收這些數據。

Props 的核心概念

  1. 父到子
    Props 是單向數據流的一部分，數據只能從父組件流向子組件，子組件無法直接更改這些數據。

  2. 數據封裝
    父組件和子組件之間通過 props 傳遞數據，使得子組件更易於重用且不依賴於父組件的具體實現。

  3. 只讀屬性
    子組件內不能直接修改 props，它們是只讀的。如果需要修改，可以通過子組件的事件通知父組件，再由父組件進行更新。

基本範例

父組件（App.vue）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div>
    <h1>父組件</h1>
    <child-component message="Hello, Vue!" :count="5"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

子組件（ChildComponent.vue）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div>
    <h2>子組件</h2>
    <p>父組件傳來的訊息：{{ message }}</p>
    <p>父組件傳來的數字：{{ count }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String, // 定義 message 為字串類型的 Prop
    count: Number    // 定義 count 為數字類型的 Prop
  }
};
</script>

執行結果

父組件向子組件傳遞了 message 和 count，子組件通過 props 接收並顯示：

1
2
3
4
5
父組件
  ↓ 傳遞數據
子組件
  父組件傳來的訊息：Hello, Vue!
  父組件傳來的數字：5

詳細解釋 Props 的屬性

1. Props 的定義

props 可以用多種形式定義：

  • 字串陣列形式
    只定義屬性名稱：

    1
    props: ['message', 'count']

  • 物件形式
    定義屬性名稱及其類型和限制條件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    props: {
      message: String,
      count: {
        type: Number,
        required: true, // 必須傳入
        default: 0,     // 預設值
        validator: value => value >= 0 // 自定義驗證
      }
    }

2. 父組件傳值

父組件在子組件上使用屬性傳值：

  • 靜態值：

    1
    <child-component message="Hello" count="10"></child-component>

  • 動態值（使用 :）：

    1
    <child-component :message="parentMessage" :count="parentCount"></child-component>

3. 單向數據流

父組件修改傳遞的數據時，子組件的 props 會隨之更新；但子組件不能直接修改 props。

  • 錯誤操作：直接修改 props

    1
    this.message = "New Message"; // ❌ 不允許

  • 正確操作：觸發事件讓父組件更新數據
    子組件通過 $emit 通知父組件更新數據：

    1
    this.$emit('update-message', 'New Message');

使用 Props 的場景

  1. 數據傳遞：從父組件傳遞靜態或動態數據給子組件。
  2. 參數化子組件：讓子組件能根據不同數據呈現不同的內容。
  3. 重用組件：例如一個按鈕組件，可以通過 props 傳遞不同文字、樣式或行為參數。

總結

  • props 是用來在父子組件間傳遞數據的工具。
  • 子組件的 props 必須明確定義，且是只讀的。
  • 如果需要讓子組件更改數據，應使用事件通知父組件更新數據。