Accesorios de componentes de Vue.js

Los accesorios se utilizan para transmitir el estado a los componentes secundarios. Aprende todo sobre ellos

Definir un prop dentro del componente.

Los accesorios son la forma en que los componentes pueden aceptar datos de los componentes que los incluyen (componentes principales).

Cuando un componente espera uno o más prop, debe definirlos en supropspropiedad:

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

o, en un componente de archivo único de Vue:

<template>
  <p>{{ name }}</p>
</template>

<script> export default { props: [‘name’] } </script>

Acepta múltiples accesorios

Puede tener múltiples accesorios agregándolos a la matriz:

Vue.component('user-name', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

Establecer el tipo de accesorio

Puede especificar el tipo de prop usando un objeto en lugar de una matriz, usando el nombre de la propiedad como clave de cada propiedad y el tipo como valor:

Vue.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

Los tipos válidos que puede utilizar son:

  • Cuerda
  • Número
  • Booleano
  • Formación
  • Objeto
  • Fecha
  • Función
  • Símbolo

Cuando un tipo no coincide, Vue alerta (en modo de desarrollo) en la consola con una advertencia.

Los tipos de accesorios se pueden articular más.

Puede permitir varios tipos de valores diferentes:

props: {
  firstName: [String, Number]
}

Establecer un accesorio para que sea obligatorio

Puede exigir que un accesorio sea obligatorio:

props: {
  firstName: {
    type: String,
    required: true
  }
}

Establecer el valor predeterminado de un prop

Puede especificar un valor predeterminado:

props: {
  firstName: {
    type: String,
    default: 'Unknown person'
  }
}

Para objetos:

props: {
  name: {
    type: Object,
    default: {
      firstName: 'Unknown',
      lastName: ''
    }
  }
}

defaulttambién puede ser una función que devuelve un valor apropiado, en lugar de ser el valor real.

Incluso puede crear un validador personalizado, que es genial para datos complejos:

props: {
  name: {
    validator: name => {
      return name === 'Flavio' //only allow "Flavios"
    }
  }
}

Pasando accesorios al componente

Pasas un accesorio a un componente usando la sintaxis

<ComponentName color="white" />

si lo que pasa es un valor estático.

Si es una propiedad de datos, usa

<template>
  <ComponentName :color=color />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

Puede usar un operador ternario dentro del valor de prop para verificar una condición de veracidad y pasar un valor que depende de ella:

<template>
  <ComponentName :colored="color == 'white' ? true : false" />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

Descarga mi gratisManual de Vue


Más tutoriales de vue: