Pasar datos entre componentes en Vue.js empieza por dominar los props: el mecanismo oficial para enviar información de un componente padre a un componente hijo. Si estás aprendiendo Vue.js y quieres reutilizar componentes con datos dinámicos, este flujo es el primer paso para construir interfaces escalables y reactivas.

¿Qué son los props en Vue.js y para qué sirven?

Los props son atributos personalizados que un componente padre pasa a un componente hijo para que este los use como si fueran variables internas. La gran diferencia es que el dato vive en el padre y el hijo solo lo recibe.

¿Qué es un prop en Vue.js? Es una variable que un componente padre envía a un componente hijo. El hijo la declara en la opción props y la usa en su template como cualquier otro dato reactivo.

Piensa en una lista de tareas: el padre tiene el array de tareas y cada hijo (v-item) recibe su texto vía prop. Así reutilizas el mismo componente con datos distintos sin duplicar código.

¿Cómo creo un componente hijo reutilizable con slots?

Antes de pasar a props, vale la pena recordar el punto de partida. Imagina un componente raíz con un template que muestra una lista de elementos li repetidos a mano. Ese código se vuelve difícil de mantener.

La primera mejora es aislar cada elemento en un componente propio, por ejemplo v-item, cuyo template contiene un único li con un slot default. Eso permite inyectar contenido desde el padre y mantener estilos y lógica encapsulados en el hijo.

El siguiente paso natural es iterar. Con la directiva v-for recorres un array items declarado en la función data del padre y por cada ítem renderizas un v-item. Con un simple array generas toda la lista en pantalla.

¿Cómo paso datos del padre al hijo con v-bind y props?

Mostrar contenido vía slot es útil, pero a veces necesitas pasar el dato como un atributo en vez de como contenido. Ahí entra v-bind junto con la opción props del hijo.

Declarar la prop en el componente hijo

En el componente hijo agregas la opción props. La forma rápida es una lista de strings con los nombres de las variables que quieres recibir.

js export default { props: ['text'], template: '<li>{{ text }}</li>' }

Si no declaras la prop, Vue.js lanza un error indicando que la variable se está invocando pero no está definida en la instancia del componente. Es el aviso típico cuando se te olvida registrarla.

Enviar el valor desde el componente padre

En el padre usas v-bind:text (o su forma corta :text) sobre el componente hijo y le pasas el valor que quieras, normalmente la variable del v-for.

html <v-item v-for="item in items" :text="item" />

La directiva v-bind permite enviar cualquier tipo de dato: strings, numbers, booleanos, objetos o JSON completos. Y como todo en Vue.js, el valor es reactivo: si el padre lo cambia, el hijo se actualiza solo.

¿Cuál es la diferencia entre slot y prop? El slot inyecta contenido (HTML o componentes) dentro del hijo. El prop envía datos (texto, números, objetos) que el hijo usa como variable en su lógica o template.

¿Cuál es la sintaxis recomendada para declarar props?

Declarar props como lista funciona, pero en proyectos serios se considera mala práctica. La forma correcta es declararlos como un objeto, donde cada prop describe su tipo y configuración.

js props: { text: { type: String, default: '' } }

Las dos configuraciones que vas a usar todo el tiempo son:

• type: define el tipo de dato esperado (String, Number, Boolean, Object, Array).
• default: valor por defecto si el padre no envía la prop.
• Otras opciones de validación están en la documentación oficial de Vue.

Si declaras type: String y pasas un número o un booleano, Vue lo interpreta como string. Por eso definir el tipo correcto evita errores silenciosos.

¿Puedo modificar un prop desde el componente hijo?

No deberías. Es una regla clave en Vue.js: mutar un prop dentro del hijo es una mala práctica.

La razón es simple: si el hijo cambia el valor, el padre no tiene forma de enterarse de ese cambio. El flujo de datos en Vue es unidireccional: baja del padre al hijo. Para comunicar cambios en sentido contrario necesitas eventos, que es justo el siguiente tema en el camino del aprendizaje.

Mientras tanto, trata cada prop como solo lectura dentro del hijo. Si necesitas transformarla, crea una computed o una variable local basada en ella, pero nunca la sobrescribas directamente.

¿Ya intentaste pasar un objeto completo como prop en tu propio proyecto? Cuéntame en los comentarios qué estructura usaste y cómo la recibiste en el hijo.