2024-12-17 符合 props 定義的格式 是什麼格式?

發表於 更新於 分類於 閱讀次數：
2024-12-17 符合 props 定義的格式 是什麼格式?

2024-12-17 符合 props 定義的格式 是什麼格式?

符合 props 定義的格式 是什麼格式?

在 Vue 中，**props 定義的格式，就是用來描述父組件需要傳給子組件的資料的形態和規則**。當你使用 props 時，需要遵循以下格式與規則來定義和傳遞資料。

1. 基本格式

在子組件的 props 選項中，你可以用多種方式定義接收的 props，從最簡單的形式到更嚴格的類型檢查。

(1) 字串陣列格式

如果你只想定義 props 的名稱而不檢查類型，可以使用字串陣列的方式：

1
props: ['title', 'members']
  • 這代表子組件可以接收 title 和 members，但不會對它們的類型或結構進行驗證。

(2) 對象格式

當你需要檢查類型或添加更多規則時，可以使用對象格式：

1
2
3
4
props: {
  title: String, // 必須是字串
  members: Array, // 必須是陣列
}

這裡的 title 和 members 都是 props，並且指定了它們的類型（String 和 Array）。

2. 高級格式

可以進一步添加更多選項，例如：是否必填、預設值、型別檢查等。

(1) 基本型別驗證

你可以用 Vue 提供的型別來檢查 props 的格式：

1
2
3
4
5
6
7
8
9
10
11
props: {
  title: {
    type: String, // 期望是一個字串
    required: true, // 父組件必須提供這個 prop
  },
  members: {
    type: Array, // 期望是一個陣列
    required: true, // 父組件必須提供
    default: () => [], // 預設值是空陣列
  },
}

(2) 多種型別驗證

如果一個 prop 可以是多種類型，可以用陣列定義：

1
2
3
4
5
6
props: {
  content: {
    type: [String, Array], // 可以是字串或陣列
    default: '', // 預設值為空字串
  },
}

3. 父組件如何傳入 props

父組件在使用子組件時，通過屬性傳遞 props，格式如下：

1
<AddExpenseModal :title="modalTitle" :members="groupMembers" />
  • :title="modalTitle"：傳遞父組件中的變數 modalTitle 作為子組件的 title。
  • :members="groupMembers"：傳遞父組件中的變數 groupMembers 作為子組件的 members。

這裡的 modalTitle 和 groupMembers 必須符合子組件 props 定義的格式，例如類型是正確的。

4. Vue 的型別驗證規則

Vue 在執行時會檢查傳入的 props 是否符合定義，並在控制台顯示警告。如果你傳入的資料不符合定義，例如類型錯誤，會出現以下情況：

  • 正確： 資料會正確地傳遞到子組件。
  • 錯誤： Vue 會在開發模式下顯示警告，但不會阻止程式執行。

例如：

1
2
3
4
5
6
props: {
  members: {
    type: Array,
    required: true,
  },
}

如果父組件傳入的 members 不是陣列，Vue 就會顯示警告：

1
[Vue warn]: Invalid prop: type check failed for prop "members". Expected Array, got Object.

5. 綜合範例

假設我們有一個子組件 AddExpenseModal.vue：

1
2
3
4
5
6
7
8
9
10
11
12
export default {
  props: {
    members: {
      type: Array,
      required: true,
    },
    title: {
      type: String,
      default: '新增支出',
    },
  },
};

父組件使用時：

1
<AddExpenseModal :members="groupMembers" :title="'新增支出表單'" />

傳遞的資料：

  • 父組件的 groupMembers 必須是陣列，否則會報警告。
  • 如果沒有傳 title，子組件會使用預設值 '新增支出'。

6. 常見錯誤與解決方法

(1) 傳遞類型不符

1
2
3
props: {
  members: Array,
}

但父組件傳了字串：

1
<AddExpenseModal :members="'這是一個字串'" />

會顯示警告：Invalid prop: type check failed for prop "members". Expected Array, got String.

(2) 忘記用 : 傳遞變數

正確：

1
<AddExpenseModal :members="groupMembers" />

錯誤：

1
<AddExpenseModal members="groupMembers" />

這樣會把字串 "groupMembers" 傳給 members，而不是變數。

總結

  1. props 定義的格式：

    • 可以是簡單字串陣列（['name', 'age']）。
    • 可以是物件格式（包含類型和規則）。

  2. 定義規則的好處：

    • 明確定義子組件應該接收什麼資料，讓程式碼更易於維護。
    • 自動檢查類型，減少錯誤。

  3. 父組件傳遞 props 時需要符合定義的規範，例如類型、格式和是否必填。