2024-12-18 vue3 父子組件傳遞變數的完整配對流程

發表於 閱讀次數：
2024-12-18 vue3 父子組件傳遞變數的完整配對流程

2024-12-18 vue3 父子組件傳遞變數的完整配對流程

vue3 父子組件傳遞變數的完整配對流程

是的！你總結的完全正確！讓我們再清楚地整理和解釋一下這個配對關係：

父子組件傳遞變數的完整配對流程

  1. 父組件的模板 (Template)
    父組件的 template 中，通過**屬性綁定 (:)**，將父組件的變數值傳遞給子組件的 props。

    範例：

    1
    <子組件名稱 :子組件變數名稱="父組件變數" />
    • 子組件變數名稱：對應子組件的 props 定義中的名稱。
    • 父組件變數：父組件中的變數，會將其值傳遞給子組件。

  1. 子組件的腳本 (Script)
    子組件的 script 中，通過 props 選項定義子組件可以接收的資料（變數名稱及其類型、規則）。

    範例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    export default {
      props: {
        子組件變數名稱: {
          type: <資料類型>,      // (選填) 指定變數的類型，如 String, Array 等
          required: <布林值>,    // (選填) 指定是否為必須傳入
          default: <預設值>,     // (選填) 提供變數的預設值
        },
      },
    };

範例實作：

父組件：SplitBill.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div>
    <!-- 傳遞父組件變數 groupMembers 給子組件 -->
    <AddExpenseModal :members="groupMembers" :title="'新增支出'" />
  </div>
</template>

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

export default {
  components: { AddExpenseModal },
  data() {
    return {
      groupMembers: [
        { name: 'Alice', balance: 0 },
        { name: 'Bob', balance: 0 },
      ],
    };
  },
};
</script>

子組件：AddExpenseModal.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div>
    <h3>{{ title }}</h3>
    <ul>
      <li v-for="(member, index) in members" :key="index">
        {{ member.name }} - {{ member.balance }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    members: {
      type: Array, // 必須是陣列
      required: true, // 父組件必須傳入
    },
    title: {
      type: String, // 必須是字串
      default: '預設標題', // 預設值
    },
  },
};
</script>

流程解釋：

  1. 在父組件的 template 中：

    • <AddExpenseModal :members="groupMembers" :title="'新增支出'" />
    • 父組件傳遞的 groupMembers 和 '新增支出' 對應到子組件的 props。

  2. 在子組件的 script 中：

    • 子組件透過 props 接收到父組件的資料：
      • members 接收 groupMembers（陣列）。
      • title 接收 '新增支出'（字串）。

  3. 子組件的 template 可以使用這些 props：

    • {{ title }}：顯示 '新增支出'。
    • 使用 v-for 將傳入的 members 資料列印到畫面上。

注意事項：

  1. 父組件在傳遞變數時，記得使用 **:**（用於綁定變數，而不是字串）。

    1
    2
    3
    4
    5
    <!-- 正確： -->
    <AddExpenseModal :members="groupMembers" />

    <!-- 錯誤： -->
    <AddExpenseModal members="groupMembers" />

    錯誤例子會將字串 "groupMembers" 傳入，而不是變數的值。

  2. 子組件的 props 定義中，變數名稱需要與父組件模板中的屬性名稱完全對應（區分大小寫）。

  3. 如果父組件的變數類型與子組件 props 定義的類型不符，Vue 在開發模式下會顯示警告。

總結

你說的完全正確！核心架構就是：

  • 父組件：<子組件名稱 :子組件變數名稱="父組件變數">
  • 子組件：export default { props: { 子組件變數名稱: ... } }