Cómo pasar datos de padre a hijo en Vue

Aprende a pasar datos de forma clara y escalable en Vue. Aquí verás cómo estructurar componentes, mantener el flujo unidireccional de información y usar props para conectar un padre con sus hijos tanto en Composition API como en Options API. Ideal para reutilizar estado, reducir errores y mantener el código limpio.

¿Por qué el flujo va de padre a hijo y qué rol cumplen las props?

Vue organiza la interfaz en una jerarquía: la app es el padre y cada componente es hijo. Según su filosofía, el flujo de información es de una sola dirección: de padre a hijo. Para lograrlo, se utilizan props: propiedades definidas en el hijo a las que el padre les pasa valores.

• Flujo unidireccional: evita inconsistencias y hace el estado predecible.
• Componentes anidados: un hijo puede tener sus propios hijos.
• Props: el hijo declara qué espera recibir; el padre envía con v-bind.
• Listas y repetición: el padre puede renderizar múltiples hijos con v-for y una key única.

En este enfoque, el estado “vive” donde debe vivir: datos globales o compartidos en el padre; datos específicos en el hijo cuando procede.

¿Cómo implementarlo en Composition API?

Primero se aisló el estado del producto dentro de un componente usando setup y un estado reactivo. Luego se detectó que la función add to cart dependía del estado definido en el padre. La solución fue mover el arreglo de productos al padre y pasar cada producto al hijo mediante una prop.

¿Cómo define el padre la lista y pasa el producto?

• Define una referencia de productos: un arreglo con varios objetos producto.
• Recorre la lista y crea una instancia del componente por elemento.
• Usa v-bind para pasar el producto actual y una key única basada en el nombre.

<!-- Padre (template) -->
<Product
  v-for="product in products"
  :key="product.name"
  :product="product"
/>

// Padre (script) — Composition API
import { ref } from 'vue'

const products = ref([
  { name: 'P1', price: 10, stock: 3 },
  { name: 'P2', price: 20, stock: 5 },
  { name: 'P3', price: 15, stock: 2 },
])

¿Cómo declara el hijo la prop y la usa en setup?

• El componente hijo declara la prop en su definición: props: ['product'].
• En setup(props) se accede a props.product para leer datos del producto.
• Se exponen métodos como add to cart y apply discount desde setup.

// Hijo (Product.js) — Composition API
export default {
  props: ['product'],
  setup(props) {
    function addToCart() {
      // usa props.product.
    }
    function applyDiscount() {
      // lógica de descuento.
    }
    return { addToCart, applyDiscount, product: props.product }
  },
  template: `
    <div>
      <h3>{{ product.name }}</h3>
      <p>Precio: {{ product.price }}</p>
      <p>Stock: {{ product.stock }}</p>
      <button @click="addToCart">Agregar al carrito</button>
    </div>
  `,
}

Puntos clave aprendidos:

• Declarar props en el hijo para permitir que el padre envíe datos.
• Recibir props en setup(props) para acceder a props.product.
• Reutilización: el mismo componente se instancia por cada elemento en la lista.
• Manejo de estado: el arreglo de products vive en el padre; el hijo consume y actúa.

¿Cómo se logra lo mismo con Options API?

El patrón es muy similar. Se define props: ['product'] en el componente y se accede desde el contexto con this.product. El padre recorre la lista y pasa la prop igual que en Composition API.

¿Cómo se declaran props y se accede con this?

• En el hijo, props: ['product'] agrega product al contexto.
• En el template se puede leer product directamente, o como this.product en métodos.

// Hijo — Options API
export default {
  props: ['product'],
  methods: {
    addToCart() {
      // usa this.product.
    },
    applyDiscount() {
      // lógica de descuento.
    },
  },
}

<!-- Padre — Options API -->
<Product
  v-for="product in products"
  :key="product.name"
  :product="product"
/>

Beneficios prácticos:

• Consistencia entre Composition API y Options API al definir props.
• Contexto claro: en Options API, this.product es la prop inyectada; en Composition API, props.product en setup.
• Escalabilidad: separar el estado global (padre) del estado específico (hijo) evita errores como en add to cart cuando el dato no está donde se espera.

¿Tienes dudas sobre cómo organizar tu estado o cómo estructurar tus props? Comenta tu caso y vemos cómo optimizarlo.