vue prop验证

[5Mi]

vue Prop验证

组件可以为 props 指定验证要求。当组件给其他人使用时这很有用，因为这些验证要求构成了组件的 API，确保其他人正确地使用组件。此时 props 的值是一个对象，包含验证要求：

Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型 (1.0.21+)
    propM: [String, Number],
    // 必需且是字符串
    propB: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propC: {
      type: Number,
      default: 100
    },
    // 对象/数组的默认值应当由一个函数返回
    propD: {
      type: Object,
      default: function () {
        return { msg: 'hello' }
      }
    },
    // 指定这个 prop 为双向绑定
    // 如果绑定类型不对将抛出一条警告
    propE: {
      twoWay: true
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    },
    // 转换函数（1.0.12 新增）
    // 在设置值之前转换值
    propG: {
      coerce: function (val) {
        return val + '' // 将值转换为字符串
      }
    },
    propH: {
      coerce: function (val) {
        return JSON.parse(val) // 将 JSON 字符串转换为对象
      }
    }
  }
})

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

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

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

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

项目中有用到:

export default{
        props:{
            title: {
                type: String,
                required: true
            },
            hasbackbtn:{
                //验证类型是布尔值
                type: Boolean,
                //默认值为true 即子组件标签上可以不设定此prop(这里是hasbackbtn) 默认为true
                default: true
            }
        },
        ...

{{extend ('./base.xtpl')}}

{{#block ('body')}}

<div id="emc-app">
    <header-bar :hasbackbtn="false" title={{title}}></header-bar>
    {{{block ('content')}}}
</div>

{{/block}}

这里注意 由于是布尔值 所以需要使用v-bind:hasbackbtn="false"否者会将此false视为字符串,导致prop验证不通过当 prop 验证失败了，Vue 将拒绝在子组件上设置此值，并且控制台将抛出一条报错警告