¿Cómo funcionan los componentes y las props en Vue?

Question

Accepted Answer

**Los componentes** son piezas reutilizables y autónomas de UI. **Las props** son la forma en que un padre transmite datos *hacia abajo* a un hijo — son las entradas tipadas y de solo lectura del hijo. ## Definir props en el hijo ```vue ``` ## Pasar props desde el padre ```vue ``` Nota la diferencia: `name="Ann"` pasa una cadena literal, mientras que `:age="30"` (con `v-bind`) evalúa una expresión — necesario para números, booleanos, objetos o variables. También ten en cuenta que los nombres de props son `camelCase` en JS pero `kebab-case` en plantillas (`isAdmin` → `:is-admin`). ## Las props son unidireccionales y de solo lectura ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Los datos fluyen **hacia abajo** (padre → hijo). Un hijo no debe modificar sus props; si necesita cambiar algo, usa una copia local o **emite un evento** pidiendo al padre que cambie la fuente ("props hacia abajo, eventos hacia arriba"). Este flujo unidireccional mantiene los datos predecibles. ## Props con TypeScript ```vue ``` ## Por qué es importante Los componentes + props son la base de la arquitectura de Vue — compones UIs a partir de componentes reutilizables y los configuras mediante props. Entender que las props son **unidireccionales y de solo lectura** (datos hacia abajo, eventos hacia arriba) es el modelo mental fundamental que mantiene las aplicaciones Vue predecibles; mutar props o esperar un flujo bidireccional de props es una fuente clásica de errores.