Events: De hijo a padre

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".

Crea una cuenta y continúa aprendiendo 🚀

Events: De hijo a padre

Eventos en Vue

Emisión de eventos

Escucha de eventos en el componente padre

Declaración de eventos en el componente hijo

Diferenciación de eventos por producto

Resumen del flujo