Vue----props 验证

---

1 props 验证

props 验证指的是：在封装组件时对外界传递过来的 props 数据进行合法性的校验，从而防止数据不合法的问题。

使用数组类型的 props 节点的缺点：无法为每个 prop 指定具体的数据类型。

2 对象类型的 props 节点

使用对象类型的 props 节点，可以对每个 prop 进行数据类型的校验

  // props: ['count', 'state'],
  props: {
    
    
    count: {
    
    
      type: Number
    },
    state: Boolean
  }

<template>
  <div>
    <p>数量：{
   
   { count }}</p>
    <p>状态：{
   
   { state }}</p>
  </div>
</template>

<script>
export default {
      
      
  name: 'MyCount',
  // props: ['count', 'state'],
  props: {
      
      
    count: {
      
      
      type: Number
    },
    state: Boolean
  }
}
</script>

<style lang="less" scoped></style>

3 props 验证

对象类型的 props 节点提供了多种数据验证方案。

① 基础的类型检查
② 多个可能的类型
③ 必填项校验
④ 属性默认值
⑤ 自定义验证函数

4 基础的类型检查

可以直接为组件的 prop 属性指定基础的校验类型，从而防止组件的使用者为其绑定错误类型的数据。

4.1 支持校验的基础类型

String
Number
Boolean
Array
Object
Date
Function
Symbol

5 多个可能的类型

如果某个 prop 属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型

info的值可能是字符串或数字

扫描二维码关注公众号，回复： 14026314 查看本文章

    info: [String, Number]

<template>
  <div>
    <p>数量：{
   
   { count }}</p>
    <p>状态：{
   
   { state }}</p>
  </div>
</template>

<script>
export default {
      
      
  name: 'MyCount',
  // props: ['count', 'state'],
  props: {
      
      
    count: {
      
      
      type: Number
    },
    state: Boolean,
    info: [String, Number]
  },
}
</script>

<style lang="less" scoped></style>

6 必填项校验

如果组件的某个 prop 属性是必填项，必须让组件的使用者为其传递属性的值。

可以将其设置为必填项：

    count: {
    
    
      type: Number,
      required: true //count属性的值必须有
    },

<template>
  <div>
    <p>数量：{
   
   { count }}</p>
    <p>状态：{
   
   { state }}</p>
  </div>
</template>

<script>
export default {
      
      
  name: 'MyCount',
  // props: ['count', 'state'],
  props: {
      
      
    count: {
      
      
      type: Number,
      required: true
    },
    state: Boolean,
    info: [String, Number]
  },
}
</script>

<style lang="less" scoped></style>

7 属性默认值

在封装组件时，可以为某个 prop 属性指定默认值。

    count: {
    
    
      type: Number,
      required: true,
      default: 100 //如果没有传值，count默认为100
    },

<template>
  <div>
    <p>数量：{
   
   { count }}</p>
    <p>状态：{
   
   { state }}</p>
  </div>
</template>

<script>
export default {
      
      
  name: 'MyCount',
  // props: ['count', 'state'],
  props: {
      
      
    count: {
      
      
      type: Number,
      required: true,
      default: 100
    },
    state: Boolean,
    info: [String, Number]
  },
}
</script>

<style lang="less" scoped></style>

8 自定义验证函数

在封装组件时，可以为 prop 属性指定自定义的验证函数，从而对 prop 属性的值进行更加精确的控制。

通过validator函数对type属性进行校验，value为传入给type的值，type的值为数组中的一个。值为数组中的一个返回值为true表示验证通过，否则验证失败。

    type: {
    
    
      validator(value) {
    
    
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }

<template>
  <div>
    <p>数量：{
   
   { count }}</p>
    <p>状态：{
   
   { state }}</p>
  </div>
</template>

<script>
export default {
      
      
  name: 'MyCount',
  // props: ['count', 'state'],
  props: {
      
      
    count: {
      
      
      type: Number,
      required: true,
      default: 100
    },
    state: Boolean,
    info: [String, Number],
    type: {
      
      
      validator(value) {
      
      
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  },
}
</script>

<style lang="less" scoped></style>