Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Events: De hijo a padre

Veamos cómo comunicar datos datos desde un componente hijo hacia un componente padre, a través de eventos. Los eventos se emiten y escuchan, veamos cómo.

Eventos en Vue

En la documentación de Vue, así como tenemos una sección que nos habla acerca de props, tenemos también una sección que nos habla acerca de eventos.

Los eventos se pueden emitir y se pueden escuchar. La idea es que un componente hijo emita un evento y que un componente padre lo escuche.

Emisión de eventos

Vamos a comentar este console.log y emitir un evento. Para esto escribimos this.$emit y vamos a indicar aquí el nombre de nuestro evento.

En este caso, vamos a emitir un evento llamado addProduct. Para evitar confusión con un método existente, renombramos este método como onAddButtonClick.

Cuando se hace click en el botón, se llama al método onAddButtonClick, el cual emite un evento llamado addProduct.

Esto significa que nuestro componente productCart está emitiendo un evento y el componente padre ahora lo va a escuchar.

Escucha de eventos en el componente padre

Para que el componente padre escuche un evento, usamos @ seguido del nombre del evento. En este caso:

  • productCart emite el evento addProduct.
  • productList escucha el evento @addProduct.
  • Se ejecuta el método onAddProduct, el cual debe estar definido en el objeto de métodos.

Al imprimir un mensaje en onAddProduct, verificamos que el botón ya funciona. Sin embargo, aparecen algunos warnings.

Declaración de eventos en el componente hijo

El warning aparece porque productCart no ha declarado qué eventos puede emitir.

Para solucionarlo, declaramos explícitamente los eventos que puede emitir el componente productCart. Luego de hacer esto y actualizar, los warnings desaparecen.

Diferenciación de eventos por producto

Actualmente, el componente padre se entera del evento, pero no distingue cuál de los productCart lo emitió.

Para diferenciarlo, agregamos un argumento al método, como productId, y concatenamos el ID del producto en la emisión del evento.

Después de hacer esto, cada vez que damos click, el ID del producto se agrega al final.

Resumen del flujo

  • Un botón HTML permite la detección de clicks.
  • Se usa @click para escuchar el evento y ejecutar onAddButtonClick.
  • Este método emite un evento llamado addProduct desde productCart.
  • El componente padre productList escucha @addProduct y ejecuta onAddProduct.
  • Se pasa el productId y se imprime en console.log.

Podemos modificar el nombre del método en el padre, por ejemplo, onProductAdded, o incluso usar el mismo nombre del evento, aunque es recomendable diferenciarlos para evitar confusión.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

En la documentación de Vue. Así como tenemos una sección que nos habla acerca de props, tenemos también una sección que nos habla acerca de eventos. Los eventos se pueden emitir y se pueden escuchar. La idea es que un componente hijo emita un evento y que un componente padre lo escuche. Entonces aquí vamos a comentar este "console.log" y vamos a emitir un evento. Para esto escribimos "this.$emit" y vamos a indicar aquí el nombre de nuestro evento, qué evento queremos emitir. En este caso vamos a emitir un evento que se va a llamar "addProduct". Y para que no se confunda con este método, vamos a renombrar este método por "onAddButtonClick". Cuando se hace click en el botón se llama al método o "onAddButtonClick", y aquí lo único que estamos haciendo es emitiendo un evento llamado "addProduct". Entonces, esto significa que nuestro componente "productCart" está emitiendo un evento y el componente padre ahora lo va a escuchar. ¿Cómo podemos decirle al componente padre que escuche un evento? Como sabemos que "productCart", produce eventos, vamos a poner una “@” seguido del nombre del evento, en este caso "addProduct". Entonces "productCart" va a emitir este evento. Nuestro "productList" está escuchando este evento y cuando ocurra este evento, nosotros vamos a llamar a un “onAddProduct”. Vamos a llamar a este método y por lo tanto necesitamos definirlo en nuestro objeto de métodos, vamos a imprimir aquí un mensaje que dirá “agregar producto”. Si hacemos esto y venimos al navegador, nos vamos a encontrar con unos warnings. El botón ya funciona. Sin embargo, nos encontramos con algunos warnings. Este warning ha ocurrido tres veces porque tenemos tres productos. Lo que nos sugiere es declarar los eventos que puede emitir nuestro componente "productCart". Entonces lo que vamos a hacer es dirigirnos a nuestro componente "productCart". Y así como declaramos que props admite, también vamos a definir qué eventos puede emitir en este caso este evento. Si hacemos ello y actualizamos, ya no nos vamos a encontrar con ningún warning y el botón funciona correctamente. No importa sobre qué producto demos click. El componente padre de manera general se entera del evento debido a que “productCart” lo emite. Sin embargo, no estamos distinguiendo cuál de los tres "productCart" está emitiendo el evento. Para ello, nosotros podemos agregar un argumento sobre nuestro método. Puede tratarse de un "productId" y entonces aquí podemos concatenar el ID del producto. Entonces, siguiendo esta idea, aquí tenemos que pasar el ID del producto. Guardamos cambios, actualizamos y ahora, cada vez que damos click, el ID del producto es agregado al final. Bien, esto ya funciona. Y lo que hemos conseguido en este caso es que el componente hijo "productCart" pueda comunicar datos hacia el componente padre “productList”. En un inicio estábamos imprimiendo el "console.log" dentro del componente hijo y finalmente conseguimos imprimir la información en el componente padre. Revisemos nuevamente cómo funciona esto. Tenemos aquí un botón. Este botón es un elemento nativo de HTML. Por lo tanto, como bien sabemos, se puede dar click sobre un botón. Nosotros queremos escuchar ese evento de click sobre este componente nativo y ejecutar código. Por eso es que ponemos aquí un "@click", porque escuchamos un evento de click. Cuando ocurre un click sobre un botón, nosotros llamamos al método “onAddButtonClick”. O sea, qué es lo que queremos hacer cuando se haga click sobre el botón de agregar. Entonces se hace click sobre el botón. Se llama este método y este método emite un evento. Estamos definiendo un evento llamado “addProduct”, estamos haciendo que este “productCart” emita el evento “addProduct”, al hacer esto, nosotros ya podemos escuchar el evento nuevo que hemos definido. Por lo tanto, ponemos un “@” seguido del evento que queremos escuchar. Este evento se encuentra definido en “productCart”. Por eso es que podemos escucharlo. Así como podemos escuchar el evento de click de un botón, podemos escuchar el evento de “addProduct” que ocurre desde un "productCart". Entonces escuchamos el evento y cuando ocurre, llegamos a nuestro método “onAddProduct”. Aquí podemos modificar el nombre de este método. Por ejemplo, “onProductAdded”. Incluso puedes repetir el nombre del evento para tu método, pero en este caso para evitar confusión, vamos a ponerle un nombre distinto a cada cosa. Aquí le estamos pasando el ID del producto sobre el cual se hizo click y finalmente estamos imprimiendo eso con un "console.log".

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos





































37

Events: De hijo a padre























































































Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.