vue 類型檢查Prop 驗證

我們可以爲組件的 prop 指定驗證要求，例如你知道的這些類型。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制檯中警告你。這在開發一個會被別人用到的組件時尤其有幫助。

爲了定製 prop 的驗證方式，你可以爲 props 中的值提供一個帶有驗證需求的對象，而不是一個字符串數組。例如：

app.component('my-component', {
  props: {
    // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認值的數字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數組默認值必須從一個工廠函數獲取
      default: function() {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propF: {
      validator: function(value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    },
    // 具有默認值的函數
    propG: {
      type: Function,
      // 與對象或數組默認值不同，這不是一個工廠函數 —— 這是一個用作默認值的函數
      default: function() {
        return 'Default function'
      }
    }
  }
})

當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制檯的警告。

提示

注意那些 prop 會在一個組件實例創建之前進行驗證，所以實例的 property (如 data、computed 等) 在 default 或 validator 函數中是不可用的。

#類型檢查

type 可以是下列原生構造函數中的一個：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

此外，type 還可以是一個自定義的構造函數，並且通過 instanceof 來進行檢查確認。例如，給定下列現成的構造函數：

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

你可以使用：

app.component('blog-post', {
  props: {
    author: Person
  }
})