Eventos personalizados en Vue: comunicar hijo a padre

Clase 28 de 37 • Curso de Reactividad con Vue.js 3

Resumen

Crear eventos personalizados en Vue con la Options API permite resolver errores comunes de estado y habilitar una comunicación clara de hijo a padre. Aquí verás cómo usar emits, la función interna emit, y cómo escuchar el evento en el padre con v-on (o @) para que funciones como add to cart trabajen con datos correctos y mantengan la reactividad.

¿Cómo se soluciona el error de add to cart desde el hijo?

Intentar ejecutar add to cart desde el hijo fallaba porque accedía a estado no disponible en ese componente: el estado vive en el padre. La solución es mover la inserción al padre y, desde el hijo, emitir un evento con el producto.

Crear en el hijo un método llamado send to cart que no muta estado.
En el padre, mantener add to cart para insertar en el estado global de la aplicación.
Pasar el producto como parámetro: el padre recibe y agrega al carrito.
Evitar referencias como this.product en el hijo: usar el parámetro product.
Continuar usando eventos de JavaScript nativos como click, mouseover, mouseenter o keyup cuando apliquen.

¿Qué cambia en el método add to cart?

Ahora recibe un producto como argumento.
Deja de leer del estado interno del hijo.
Inserta directamente el producto recibido en el carrito del padre.

¿Cómo definir y emitir eventos personalizados con emits y emit?

Para comunicar del hijo al padre se define un evento propio con la opción emits y luego se dispara con emit desde un método.

Declarar en el componente hijo la opción emits con el nombre del evento: send to cart.
Implementar el método send to cart en el hijo.
Usar la función interna emit para emitir el evento con un payload.
Enviar como payload el producto, tal como se acordó.
Mantener el mismo nombre del evento en emits y al emitir.

¿Qué datos viajan en el evento?

Viaja el producto en sí mismo como información del evento.
El padre lo recibe y lo inserta en el carrito mediante add to cart.

¿Cómo escuchar el evento con v-on (@) y mantener la reactividad?

En la vista del padre, donde se recorre la lista de productos, el componente hijo ahora expone un evento personalizado. Se escucha con v-on o con el atajo @ y se ejecuta la función del padre.

Escuchar el evento del hijo: @send to cart.
Ejecutar add to cart al ocurrir el evento.
Pasar $event: Vue reemplaza por el producto emitido.
Todo sigue siendo reactivo: descuentos aplicados en el hijo se reflejan en el padre.
Agregar múltiples productos funciona de forma consistente.
Aplicar códigos de descuento a distintos productos mantiene el estado coherente.

¿Tienes dudas sobre emits, emit, v-on o la separación entre hijo y padre al manejar el carrito? Comparte tu caso en los comentarios y lo revisamos juntos.

Carlos Eduardo Gomez García

teacher•

En Vue la comunicación de hijos a padres se hace a través de eventos, algo cool de esto es que podemos aprovecharnos de dichos eventos para hacer un componente controlado. . Un componente controlado es básicamente un componente hijo que tú puedes crear y sincronizar el valor que este emite al de alguna propiedad de data del padre, tal cual como si fuese un input, por ejemplo, con un input tú puedes usar v-model para ligar una propiedad de data a un input, y cada que ese input cambiar el valor en data() también cambia, podemos lograr el mismo efecto con un componente controlado. . Por ejemplo, podemos crear un componente que sea un slider personalizado con HTML y CSS y que dicho componente emita un valor cada que sea modificado y se sincronice con alguna propiedad de data(). Y lo mejor es que también podemos usar v-model para componentes controlados. . v-model es un shorthand para el paso de una propiedad por parte del padre y la emisión del evento de la misma propiedad por parte del hijo, un ejemplo para explicarlo mejor: .

<ChildComponent v-model="pageTitle" />

<!-- Sería un shorthand para: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

Como pueden ver, cada vez que dentro del componente hijo se desencadene algún evento, este le mandará a su padre la información de pageTitle actualizada a través del evento emitido @update:modelValue, y el padre a su vez se la regresará al hijo para sincronizarse a través del :modelValue, así se logra un componente controlado. Esto está en la documentación oficial de Vue 3: . https://v3.vuejs.org/guide/migration/v-model.html#v-model . En Vue 2 también se puede hacer, pero la sintaxis cambia, tengo un tutorial en otro curso de Vue explicando cómo hacer componentes controlados tanto en Vue 2 como en Vue 3 con Options API: . Cómo usar los componentes controlados en Vue 3 . Pero, por si te da pereza ir hasta el tutorial, puedes mirarlo aquí 👀👇 @youtube

Carlos Eduardo Gomez García

teacher•

Casi lo olvido, aquí está el código de esta clase xD: . https://github.com/RetaxMaster/vue3-platzi-commerce/tree/fbadd50f4ceb176d5d37230f4bf15b969b65c428

Alexandra Gomez Huertas

student•

Entiendo que esto rompe un paradigma del mismo vue , el de tener la comunicacion unidireccional desde padre a hijo , mi pregunta es, que tan bueno es usar este tipo de "hacks" ?

Jose Barboza

student•

1.llamar un metodo sendToCart en el button añadir carrito

@click="sendTocart()"

2.declarar emit:

emits:["sendtocart"]

3.hacer el método sendToCart

sendTocart(){
        this.$emit("sendtocart", this.product)
      }

4.en index usar sendtocart como evento

@sendtocart="addToCart($event)"

Rafael Alexander Gonzalez Diaz

student•

Antes no habia necesidad de crear el arreglo emits y funcionaba igual, me podrian explicar el por qué ahora es necesario agregar esa linea extra? Gracias

Carlos Eduardo Gomez García

teacher•

¡Hola! Realmente no es del todo taaaaaan necesario, pero es buena práctica. Es como cuando declaras qué propiedades recibe un componente desde la llave props. Pero ahora también puedes declarar (de forma explícita) qué eventos emite un componente :D

emits Option

Cristian David Sierra Barrera

student•

Como sugerencia es mejor evitar llamar todo de la misma forma cuando se esta enseñando, sobre todo para evitar confusiones, y poder reconocer efectivamente que se esta conectando con qué.

Elvis Saavedra

student•

Los props no pueden ser mutados o actualizados desde el padre, pero al parecer sólo aplica para tipos primitivos, lo que son objetos y arreglos si se pueden editar porque pasan como referencia.

Cristhian Daza

student•

Exacto, los props son solo de lectura.

Juan Camilo Palacio

student•

Cual es la diferencia de trabajar en product como parametro a product como contexto (this)? Es un tema de rendimiento? accesibilidad?

Brayan Alejandro Llanos Hoyos

student•

Es muy parecido a como lo trabaja Angular

Platzi Team

student•

Buenas compañeros, algún héroe sin capa por favor. Mi duda es: ¿cómo pasaría como parámetro el value seleccionado de la etiqueta select y así enviarlo al evento de mi componente padre y filtre?, ya que lo intento y no me está filtrando y me trae todo como se observa:

El codigo de mi componente hijo es:

    Vue.component('userOne', {
        props: ['estadoVenta'],
        data() {
            return {
                counter: 0,
                numeroDocumentoBusc: ''
            }
        },
        methods: {
            ListarVentaOne() {

                this.$emit('show-lists', this.estadoVenta);
            }
        },

anteto muchas gracias.

Carlos Eduardo Gomez García

teacher•

¡Hola! Si no me equivoco, en tu método ListarVentaOne puedes recibir el evento y acceder al elemento:

ListarVentaOne(e) {
	const select = e.target.value; // Esto debería traerte el value
	this.$emit('show-lists', this.estadoVenta);
}

¿Puedes intentarlo? Igual sería bueno si pones tu código HTML para verlo :D

Cristian Caballero

student•

Me quedo la duda de por que no se puede emitir usando camelcase? lo intente y no funciono

Ameth Ordoñez Erazo

student•

Porque si pones el nombre del evento en camelCase, Vue lo parsea en el componente padre a kebab-case, esto es para seguir el lineamiento de como se llaman los atributos de las etiquetas en HTML. Mira aqui la documentación de Vue que lo explica

Luciano Cavallo

student•

Hola Samuel, tengo un tema con el plugin de vue-html, y es que me resalta en rojo unas líneas, como en la imagen. Es que tengo algo errado???

Samuel Burbano

teacher•

Si te corre el código lo más seguro es que sea mi plug-in 😂

Le echaré un ojo 👀

Jose Alejandro Pantoja Giraldo

student•

Si quieren hacer el emit en 1 sola linea lo puede hacer asi

@click="$emit('sentocart', product)"

Eventos personalizados en Vue: comunicar hijo a padre

Introducción: fundamentos de Vue.js

Desarrollo de Aplicaciones Web con Vue.js 3

Presentación del instructor de Vue.js

Vue progresivo: framework y componentes

Problemática del declarative rendering en JavaScript

Declarative rendering con virtual DOM en Vue

Reactividad a profundidad

Paradigma reactivo: responsivo, resiliente y escalable

Proxies: la clave de la reactividad Vue

Creando tu primer mini framework reactivo

Integrar Proxy para crear mini framework reactivo

Refleja tu lógica mantenible con JavaScript

Conceptos clave de reactividad: efectos, track y trigger

Efectos trackers triggers: cómo Vue vincula datos

Templates de Vue.js

Templates de HTML en Vue.js: Mejores Prácticas Esenciales

Estructura inicial de Platzy Commerce con Vue

Expresiones JavaScript en templates Vue

v-bind y clase reactiva en Vue.js

v-show vs v-if en Vue: cuándo usar cada uno

Directiva v-for para listas en Vue.js

Eventos con v-on en templates de Vue

APIs internas de Vue.js

Options API vs Composition API en Vue.js

Diferencia entre data y ref en Vue

Métodos Vue: validar descuentos y carrito

Métodos personalizados con Composition API

Reactive en Vue: cómo agrupar estado

Segunda capa: componentes de Vue.js

Crear componentes reutilizables con Vue

Cómo pasar datos de padre a hijo en Vue

Creación de Componentes Personalizados en Aplicaciones Web