60Vue - Props(Prop 验证)

简介: 60Vue - Props(Prop 验证)

组件可以为 props 指定验证要求。如果未指定验证要求,Vue 会发出警告。当组件给其他人使用时这很有用。

prop 是一个对象而不是字符串数组时,它包含验证要求:

Vue.component('example', {
  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 value > 10
      }
    }
  }
})

type可以是下面原生构造器:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array

type 也可以是一个自定义构造器,使用instanceof检测。

当 prop 验证失败了, Vue 将拒绝在子组件上设置此值,如果使用的是开发版本会抛出一条警告。

目录
相关文章
|
7月前
|
JavaScript
Vue3中props的原理与使用
Vue3中props的原理与使用
55 0
|
7月前
|
前端开发
React中Props的详细使用和props的校验
React中Props的详细使用和props的校验
|
JavaScript
56Vue - Props(camelCase vs. kebab-case)
56Vue - Props(camelCase vs. kebab-case)
39 0
|
JavaScript
3分钟了解 vue props type类型
3分钟了解 vue props type类型
422 0
|
7月前
|
JavaScript
vue 传递 props
vue 传递 props
|
2月前
|
缓存 JavaScript Java
vue2知识点:组件的props属性、非props属性、props属性校验
vue2知识点:组件的props属性、非props属性、props属性校验
52 4
|
5月前
|
JavaScript 前端开发 IDE
|
JavaScript
【Vue】—props属性
【Vue】—props属性
|
JavaScript
vue中特殊的prop和事件
vue中特殊的prop和事件
51 0
57Vue - Props(动态 Props)
57Vue - Props(动态 Props)
76 0