摘要

為了確保元件接收到的 props 符合預期，Vue 提供了型別檢查和驗證機制。這不僅能提早發現錯誤，還能作為元件的文件說明。

定義與說明

型別檢查：

使用 defineProps 時可以指定每個 prop 的型別，包括：String、Number、Boolean、Array、Object、Function 等。

驗證機制：

除了型別檢查，還可以設定：

• required：是否必須
• default：預設值
• validator：自訂驗證函數

實作範例

UserProfile.vue

<script setup>
const props = defineProps({
  // 基本型別
  name: {
    type: String,
    required: true
  },
  // 帶有預設值
  age: {
    type: Number,
    default: 18
  },
  // 多種型別
  tags: {
    type: [String, Array],
    default: () => []
  },
  // 自訂驗證
  level: {
    type: Number,
    validator: value => value >= 0 && value <= 100
  }
});
</script>

<template>
  <div class="user-profile">
    <h2>{{ props.name }}</h2>
    <p>年齡：{{ props.age }}</p>
    <p>等級：{{ props.level }}</p>
    <p>標籤：{{ props.tags }}</p>
  </div>
</template>

結論

props 的型別檢查和驗證機制是 Vue 元件系統中重要的安全機制。它們不僅能幫助我們在開發階段捕捉錯誤，還能讓元件的使用方式更加清晰明確。在大型應用中，這些機制尤其重要。

型別檢查驗證機制開發安全