Vue 22: Props — Pasando Datos hacia Abajo
easy⏱ 5 mincoursevue
Declarando props con validación
En lugar de un simple arreglo de nombres, las props pueden ser un objeto donde cada clave mapea a una especificación: { type: Number, required: true, default: 0, validator: (v) => v >= 0 }. Vue revisa esto en tiempo de ejecución durante desarrollo y avisa en la consola cuando un valor pasado no coincide.
<!-- ProgressBar.vue -->
<script>
export default {
props: {
label: { type: String, required: true },
value: {
type: Number,
default: 0,
validator: (v) => v >= 0 && v <= 100,
},
},
};
</script>
Flujo de datos en una sola dirección
Las props siempre fluyen hacia abajo, del padre al hijo, nunca hacia arriba automáticamente. Un hijo nunca debería mutar una prop directamente — si necesita cambiar el valor, debe pedirle al padre que lo haga (aprenderás el mecanismo exacto, los eventos, en la próxima lección).
Construye ProgressBar
Declara label como un String obligatorio y value como un Number con default: 0 y un validador que lo restrinja a 0-100. Usa ProgressBar al menos dos veces en App con valores diferentes.