props 验证

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

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'
    }
  }
}
posted @ 2023-07-21 15:31  HopeLive  阅读(34)  评论(0)    收藏  举报