Vue----validación de accesorios

---

1 validación de accesorios

La verificación de accesorios se refiere a verificar la validez de los datos de accesorios transmitidos desde el mundo exterior al encapsular componentes, para evitar el problema de los datos ilegales.

Desventaja de usar un nodo de accesorios de tipo matriz : no puede especificar un tipo de datos específico para cada accesorio.

2 nodos de accesorios de tipo de objeto

Usando el nodo props del tipo de objeto, puede verificar el tipo de datos de cada 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>

Validación de 3 accesorios

El nodo props del tipo de objeto proporciona una variedad de esquemas de validación de datos.

① Verificación de tipo básico
② Múltiples tipos posibles
③ Verificación de artículo obligatoria
④ Valor predeterminado de atributo
⑤ Función de validación personalizada

4 Comprobación de tipo básico

El tipo de validación subyacente se puede especificar directamente para la propiedad prop de un componente, lo que evita que los consumidores del componente le vinculen el tipo de datos incorrecto.

4.1 Tipos básicos que soportan la validación

String
Number
Boolean
Array
Object
Date
Function
Symbol

5 tipos más posibles

Si el tipo de un valor de propiedad de prop no es único, puede especificar múltiples tipos posibles para él en forma de matriz

El valor de info puede ser una cadena o un número

    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 Comprobación de campos obligatorios

Si se requiere una propiedad prop de un componente, debe permitir que el consumidor del componente le pase el valor de la propiedad.

Se puede configurar según sea necesario:

    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 valores predeterminados de propiedad

Al envolver un componente, puede especificar un valor predeterminado para una propiedad 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 funciones de validación personalizadas

Al encapsular un componente, puede especificar una función de validación personalizada para la propiedad prop, lo que permite un control más preciso sobre el valor de la propiedad prop.

El atributo de tipo es verificado por la función de validación, el valor es el valor pasado al tipo y el valor del tipo es una de las matrices. Un valor de retorno de verdadero en la matriz indica que se pasó la verificación; de lo contrario, la verificación falla.

    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>