【Vue】元件使用之引數校驗

Prop 驗證

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

為了定製 prop 的驗證方式，你可以為 props 中的值提供一個帶有驗證需求的物件，而不是一個字串陣列。例如：

Vue.component('my-component', {
  props: {
    // 基礎的型別檢查 (`null` 匹配任何型別)
    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
      }
    }
  }
})複製程式碼

本文旨在個人學習並記錄，如有侵權，請聯絡告知，謝謝！