vue中props參數的使用

props參數的使用

在使用vue的項目開發的過程中
經常會定義大量的組件使用
這個時候組件中的定義的數據類型就非常重要了
此時我們需要定義組件中需要的數據類型
之前我只知道簡單的幾個
今天忽然發現原來還可以這樣使用簡直太棒了
特別是自定義驗證這一塊可能不經常用
但是可以處理很多特殊的場景

  props: {
    // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
    propA: Number,

    // 多個可能的類型
    propB: [String, 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'
      }
    }