vue组件中props类型及默认值

简单写法

props: {
  fieldString: String,
  fieldNumber: Number,
  fieldBoolean: Boolean,
  fieldArray: Array,
  fieldObject: Object,
  fieldFunction: Function
}

带有默认值写法

  props: {
    fieldString: {
      type: String,
      default: ''
    },
    fieldNumber: {
      type: Number,
      default: 0
    },
    fieldBoolean: {
      type: Boolean,
      default: true
    },
    fieldArray: {
      type: Array,
      default: () => []
    },
    fieldObject: {
      type: Object,
      default: () => ({})
    },
    fieldFunction: {
      type: Function,
      default: function () { }
    }
  }

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

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
     }
   }
 }