Eventos personalizados con Composition API

Aprende a comunicar componentes de hijo a padre en Vue con eventos personalizados usando la Composition API. Sin this y con el contexto de setup, podrás emitir datos desde el producto y actualizar el estado del carrito en el componente padre. Además, verás cómo evitar errores comunes como Props is not defined y por qué es clave retornar funciones al template.

¿Cómo emitir eventos personalizados con Composition API en Vue?

Para emitir eventos desde un componente hijo con la Composition API, se define un método dentro de setup y se usa el contexto con emit. No hay this en setup, así que se toma el segundo parámetro de la función para acceder a emit y enviar el producto actual.

• Define el evento que el componente lanzará: send to cart.
• Crea el método en setup y retórnalo para usarlo en el template.
• Emite el evento con los datos necesarios: props.product.

¿Cómo definir el método en setup y retornarlo?

• Crea la función send to cart dentro de setup.
• Usa el contexto: { emit }.
• Retorna el método para usarlo en el template.

export default {
  props: {
    product: Object,
  },
  setup(props, { emit }) {
    const sendToCart = () => {
      // Emite el evento con el producto actual del componente.
      emit('send to cart', props.product);
    };

    // Importante: retornar lo que se usa en el template.
    return { sendToCart };
  },
};

¿Qué detalles debes cuidar al emitir?

• No existe this en setup: usa el contexto { emit }.
• El payload del evento debe contener lo necesario: el producto actual.
• Asegúrate de guardar y limpiar caché si no ves cambios inmediatos.

¿Cómo mover add to cart al componente padre y escuchar el evento?

La función add to cart debe vivir donde está el estado del carrito, por eso se mueve al componente principal. Desde allí, se recibe el payload del evento y se actualiza el estado.

• Copia la función add to cart al componente con el carrito.
• Retórnala desde setup para usarla en el template.
• Escucha el evento send to cart y pasa el payload del evento a add to cart.

¿Cómo queda la lógica en el padre?

• La función usa el estado del carrito y recibe el producto del evento.
• Evita usar props en el padre cuando procesas el evento: usa el parámetro recibido.

export default {
  setup() {
    // Estado del carrito y demás lógica ya existente.

    const addToCart = (productFromEvent) => {
      // Usa el estado del carrito y agrega el producto recibido.
      // No uses `props` aquí: el dato viene del evento.
      // cart.value.push(productFromEvent) // Ejemplo de uso del estado.
    };

    return { addToCart };
  },
};

¿Cómo conectar evento y método desde el template?

• Escucha el evento send to cart en el componente hijo.
• Llama a add to cart con el payload del evento: $event.

• Verifica que el nombre del evento sea consistente en todos lados.

• Ejemplo de flujo.

• Hijo emite: emit('send to cart', props.product).
• Padre escucha y pasa $event a addToCart.

¿Qué habilidades, conceptos y errores clave aparecen?

Domina estas ideas para construir componentes escalables y predecibles.

• Options API vs Composition API: se replica el patrón de eventos, pero con setup y sin this.
• Contexto de setup: { emit } permite lanzar eventos personalizados desde el hijo.
• Evento send to cart: define un canal claro para comunicar el producto seleccionado.
• props.product: fuente del dato a emitir desde el componente de producto.
• add to cart en el padre: la función se mueve donde vive el estado del carrito y se retorna para el template.
• Retornar desde setup: todo lo usado en el template debe estar retornado.
• Manejo de eventos en template: escuchar el evento y pasar $event como argumento.
• Error Props is not defined: surge al usar props en el padre; solución: usar el parámetro recibido en la función.
• Refresco y caché: si no ves cambios, recarga sin caché.
• Observadores personalizados: próximos pasos para añadir dinamismo adicional.

¿Te gustaría ver un ejemplo con múltiples productos o un manejo de descuentos más avanzado? Cuéntame en los comentarios qué caso quieres resolver a continuación.