Validación de props en Vue con tipos y reglas

Contenido del curso

Conceptos básicos de Vue

Reactividad en Vue

Composición en Vue

Manejo de eventos e inputs

Optimización en Vue

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:08

Validación de props en Vue con tipos y reglas

Curso de Vue.js

Clase 9 de 34

Clase 9 / 34

Recursos

Validar props en Vue es la práctica de indicarle al framework qué tipo de dato esperas recibir en cada propiedad de un componente, si es obligatoria y qué valor tomar por defecto. Esta validación previene errores en aplicaciones reactivas y es clave cuando trabajas con datos externos como respuestas de APIs.

Aunque JavaScript no es un lenguaje fuertemente tipado y va infiriendo los tipos conforme interpreta el código, Vue te da herramientas para tipar tus props sin necesidad de migrar a TypeScript. Y aunque Vue se lleva muy bien con TypeScript, en JavaScript plano puedes lograr una validación robusta.

¿Cómo defines el tipo de dato de una prop en Vue?

En lugar de declarar tus props como un arreglo simple, conviértelas en un objeto de configuración donde cada propiedad recibe sus reglas. Vue trae por defecto soporte para tipos como Number, String, Array, Object e incluso valores nulos [01:00].

Por ejemplo, si tu componente GameCounter recibe un minNumber y un maxNumber, puedes tiparlos así:

js props: { minNumber: { type: Number, required: true }, maxNumber: { type: Number, required: true } }

La propiedad type define el tipo esperado y required: true obliga a que quien use el componente pase ese valor. Si no lo hace, verás en consola el warning Missing required prop: minNumber.

¿Qué pasa si no paso una prop marcada como required en Vue? Vue no rompe la app, pero lanza un warning en consola indicando que falta la prop requerida. El componente intentará renderizar sin ese valor.

¿Cómo asignas un valor por defecto y aceptas múltiples tipos?

La propiedad default te permite definir un valor inicial cuando no se pasa la prop desde el componente padre. Por ejemplo, si pones default: 0 en maxNumber, el componente renderizará con cero aunque no recibas nada [02:30].

Y si una prop puede llegar como número o como texto, declara el tipo como un arreglo:

js example: { type: [Number, String] }

Esto es útil cuando consumes APIs como la de Pokémon o Rick and Morty, donde no siempre tienes mapeados todos los casos de uso y los valores pueden variar de formato.

¿Cómo creas un validador personalizado para props?

Vue te permite agregar una función validator que recibe el valor de la prop como argumento y devuelve true o false según tus reglas. Esto va más allá del tipo de dato y te deja controlar qué valores específicos aceptas.

Un ejemplo concreto: imagina que tu prop example solo debe aceptar los strings + o -.

js example: { type: String, validator: (value) => { return ['+', '-'].includes(value) } }

Si alguien pasa "Hola" como valor, Vue lanzará el warning Custom validator check failed for prop example. Pero si pasas "+", todo pasa la validación sin problemas [04:30].

¿Para qué sirve un validator en una prop de Vue? Sirve para restringir los valores aceptados más allá del tipo de dato. Por ejemplo, aceptar solo strings específicos, rangos numéricos o formatos concretos.

¿Cómo declaras arrays y objetos como valor por defecto?

Aquí viene una regla clave que confunde a muchos: cuando el default es un array o un object, no puedes asignarlo directamente. Tienes que envolverlo en una función que retorne el valor.

La razón es que los objetos y arrays son referencias en JavaScript, y Vue necesita una nueva instancia para cada componente que use esa prop.

js example: { type: Array, default: () => [1, 2, 3, 4] }

Para objetos funciona igual, pero recuerda usar paréntesis dentro de la arrow function para que JavaScript no interprete las llaves como cuerpo de función:

js example: { type: Object, default: () => ({ name: 'Enrique' }) }

Sin esos paréntesis externos, JavaScript leerá {} como bloque de código en vez de objeto literal y obtendrás un error de sintaxis [06:30].

¿Por qué validar props es fundamental en frameworks reactivos?

Validar propiedades te permite anticiparte a los errores en tiempo de desarrollo en lugar de depurarlos en producción. En aplicaciones reactivas, donde los datos fluyen entre múltiples componentes, saber con certeza qué tipo de valor llega a cada uno reduce drásticamente los bugs.

Esto cobra más importancia cuando consumes datos externos, porque las APIs no siempre devuelven estructuras predecibles. Tener una capa de validación en tus props funciona como un contrato entre componentes.

Las tres ventajas concretas que te da Vue al validar props son:

Detectar props faltantes con required: true.
Garantizar el tipo correcto con type.
Restringir valores específicos con validator.

Ahora ponlo a prueba con tu propio GameCounter: piensa qué otras props podrías pasarle desde la aplicación principal. Un número aleatorio, una flag para indicar si el jugador ganó, un contador de intentos. Comenta qué validaciones agregarías tú.

Resumen

¿Cómo defines el tipo de dato de una prop en Vue?

Por ejemplo, si tu componente GameCounter recibe un minNumber y un maxNumber, puedes tiparlos así:

js props: { minNumber: { type: Number, required: true }, maxNumber: { type: Number, required: true } }

La propiedad type define el tipo esperado y required: true obliga a que quien use el componente pase ese valor. Si no lo hace, verás en consola el warning Missing required prop: minNumber.

¿Qué pasa si no paso una prop marcada como required en Vue? Vue no rompe la app, pero lanza un warning en consola indicando que falta la prop requerida. El componente intentará renderizar sin ese valor.

¿Cómo asignas un valor por defecto y aceptas múltiples tipos?

Y si una prop puede llegar como número o como texto, declara el tipo como un arreglo:

js example: { type: [Number, String] }

Esto es útil cuando consumes APIs como la de Pokémon o Rick and Morty, donde no siempre tienes mapeados todos los casos de uso y los valores pueden variar de formato.

¿Cómo creas un validador personalizado para props?

Un ejemplo concreto: imagina que tu prop example solo debe aceptar los strings + o -.

js example: { type: String, validator: (value) => { return ['+', '-'].includes(value) } }

Si alguien pasa "Hola" como valor, Vue lanzará el warning Custom validator check failed for prop example. Pero si pasas "+", todo pasa la validación sin problemas [04:30].

¿Para qué sirve un validator en una prop de Vue? Sirve para restringir los valores aceptados más allá del tipo de dato. Por ejemplo, aceptar solo strings específicos, rangos numéricos o formatos concretos.

¿Cómo declaras arrays y objetos como valor por defecto?

Aquí viene una regla clave que confunde a muchos: cuando el default es un array o un object, no puedes asignarlo directamente. Tienes que envolverlo en una función que retorne el valor.

La razón es que los objetos y arrays son referencias en JavaScript, y Vue necesita una nueva instancia para cada componente que use esa prop.

js example: { type: Array, default: () => [1, 2, 3, 4] }

Para objetos funciona igual, pero recuerda usar paréntesis dentro de la arrow function para que JavaScript no interprete las llaves como cuerpo de función:

js example: { type: Object, default: () => ({ name: 'Enrique' }) }

Sin esos paréntesis externos, JavaScript leerá {} como bloque de código en vez de objeto literal y obtendrás un error de sintaxis [06:30].

¿Por qué validar props es fundamental en frameworks reactivos?

Las tres ventajas concretas que te da Vue al validar props son:

Detectar props faltantes con required: true.
Garantizar el tipo correcto con type.
Restringir valores específicos con validator.

Conceptos básicos de Vue

Gráfica de barras reactiva con Vue.js

Creación de un Proyecto Vue desde Cero

Estructura de un Single File Component en Vue

Fundamentos de Vue.js: Montaje y Virtual DOM

Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass

Agregar estilos globales y scripts en aplicaciones Vue.js

Sintaxis Vue: v-bind y dobles corchetes

Props y Comunicación entre Componentes en VueJS

Validación de props en Vue con tipos y reglas

Vue 3: Uso y Ventajas de la Composition API

Reactividad en Vue

Reactividad en Vue con ref

Reactividad con `ref` en Vue 3: Creación y Uso Práctico

Uso de Watchers en Vue para Controlar Estados Reactivos

Computed properties en Vue y su caché

v-if vs v-show no Vue explicados

Ciclos de Vida de Componentes en Vue 3: Guía Completa

Composición en Vue

Pensamiento por componentes en Vue

Consumir una API con reactive en Vue

Diferencias entre reactive y ref en Vue 3

Renderizar listas con v-for en Vue

Slots y named slots en Vue

Herencia de Atributos en Componentes Vue: Uso y Ejemplos Prácticos

Manejo de eventos e inputs

Manejo de Inputs y Estado con VModel en Vue.js

Eventos y Modificadores en Vue: Focus y Blur en Searchbar

Eventos EMIT en Vue: Comunicación entre Componentes

Optimización en Vue

Componentes dinámicos con la tag component

Implementación de Modales y Manejo de Estado Global en Vue.js

Uso de Teleport en Vue para Optimizar el Renderizado de Modales

Uso de Composables en Vue para Reutilización de Lógica

refs en Vue para acceder al DOM real

Virtual DOM en Vue: Funcionamiento y Beneficios

Despliegue

Despliegue de Aplicaciones Vue: De Desarrollo a Producción

Cómo desplegar Vue en Netlify con GitHub

Despliegue de Aplicaciones Web con GitHub Actions y Pages

Validación de props en Vue con tipos y reglas