Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Un botón sobre cada card
Breve repaso sobre Props. Luego agregamos un botón sobre cada ProductCard, de modo que posteriormente permita agregar cada producto al carrito de compras.
Envío de datos de padre a hijo
En la lección anterior hemos visto cómo podemos comunicar datos desde un componente padre, en este caso ProductList, hacia un componente hijo, en este caso ProductCart.
Una forma de hacerlo es a través de props. Aquí estamos enviando información a través de este prop llamado Product. De esta manera, los productos que están definidos dentro de ProductList son enviados a este componente ProductCart, uno a la vez.
A través de esta expresión donde Product es el prop o propiedad que se está enviando al componente hijo y P es el valor que se envía. De esta manera podemos comunicar valores desde un componente padre hacia un componente hijo.
Pero no hemos visto cómo hacer lo contrario.
Comunicación de hijo a padre
En esta lección vamos a ver cómo hacer lo contrario, es decir, que un componente hijo pueda notificar de algo a su componente padre y, si lo desea, pueda enviar también información.
Para esto, vamos a agregar un elemento más dentro de nuestro ProductCart.
Específicamente, vamos a agregar un botón que dirá "Agregar al carrito".
Tras agregarlo, vemos que para cada producto tenemos un botón "Agregar al carrito".
Si hacemos click, no pasa nada porque no hemos asociado todavía ningún evento al botón.
Podemos asociar un evento de click en el botón, por ejemplo:
click=
Y vamos a definir un método que en este caso será addProduct.
Definiendo el método addProduct
Para que esto funcione, tenemos que definir un objeto methods en nuestro script y dentro de él, el método addProduct.
Por ahora, simplemente vamos a imprimir un mensaje en consola que dirá:
"Agregando producto".
Abrimos la consola en nuestro navegador presionando F12. Si hacemos click en el botón:
- Se imprimirá el mensaje.
- Si hacemos click en otro botón, el mensaje se imprimirá de nuevo.
- Si hacemos click en un tercer botón, el mensaje se imprimirá una vez más.
Identificando el producto agregado
Sin embargo, aún no identificamos qué producto se está agregando. Queremos que el mensaje diga:
"Agregando producto {id}"
El producto se recibe a través de props y sabemos que es de tipo product. Para que un producto tenga un id, debemos declararlo.
Agregamos el id y ahora podemos concatenarlo en el mensaje:
"Agregando producto " + id
Procedemos a agregar un id para cada uno de nuestros productos.
Probando en el navegador
Volvemos al navegador:
- Agregamos el producto 5.
- Lo agregamos varias veces.
- Agregamos otro producto.
- Agregamos un tercer producto.
Ahora estamos imprimiendo un mensaje:
"Agregando producto {id}" cada vez que se hace click en el botón "Agregar al carrito".
Esto funciona bien. Sin embargo, esta información se queda dentro del componente ProductCart.
- Si hacemos click en un botón, solo ese componente se entera del evento.
- Si hacemos click en otro botón, solo ese otro componente se entera.
- El componente padre no se entera del click.
Por lo tanto, el componente padre no puede agregar la información al carrito de compras.
Próximos pasos
Veremos en la siguiente lección cómo lograr esta comunicación de un componente hijo a un componente padre.
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 lección anterior hemos visto cómo podemos comunicar datos desde un componente padre, en este caso "ProductList" hacia un componente hijo, en este caso "ProductCart". Una forma de hacerlo es a través de props. Aquí estamos enviando información a través de este prop llamado "Product". De esta manera, los productos que están definidos dentro de "ProductList" son enviados a este componente "ProductCart" uno a la vez. A través de esta expresión donde "Product" es el prop o propiedad que se está enviando al componente hijo y "P" es el valor que se envía. Entonces, de esta manera nosotros podemos comunicar valores desde un componente padre hacia un componente hijo. Pero no hemos visto cómo hacer lo contrario. En esta lección vamos a ver cómo hacer lo contrario. O sea, que un componente hijo pueda notificar de algo a su componente padre y si lo desea, pueda enviar también información. Para esto vamos a agregar un elemento más dentro de nuestro "ProductCart". Específicamente, vamos a agregar un botón que dirá "agregar al carrito". Tras agregar ello, vemos que para cada producto tenemos un botón "agregar al carrito". Si hacemos click no pasa nada porque no hemos asociado todavía ningún evento de click al botón. Nosotros podemos asociar un evento de click en el botón, por ejemplo, "click=" y vamos a definir un método que en este caso será "addProduct". Para que esto funcione, tenemos que definir un objeto o "methods" en nuestro script y entonces definir el método “addProduct”. Por ahora simplemente vamos a imprimir un mensaje en consola que dirá "agregando producto". Recordamos y en nuestro navegador vamos a abrir la consola presionando F12. Si hago click en este botón, tenemos aquí este mensaje de los, si hago click en este otro también y en este tercero. De igual manera, aquí tenemos el mismo mensaje se ha impreso tres veces. Sin embargo, no estamos identificando que producto se está agregando. Queremos que aquí diga "agregando producto" seguido del id del producto. El producto se recibe a través de props y sabemos que es de tipo product. Entonces para que un producto tenga un id tenemos que declarar ello. Entonces agregamos el id por aquí y tras hacer ello vamos a poder aquí concatenar el id del producto y procedemos a agregar un id para cada uno de nuestros productos. Ya está. Volvemos a nuestro navegador y vamos a agregar el producto 5. Si queremos lo podemos agregar varias veces. Agregamos otro producto y agregamos el otro producto también. De esta manera estamos imprimiendo un mensaje, "agregando producto" cada vez que se hace click en el botón de "agregar al carrito". Esto funciona bien. Sin embargo, esta información se queda dentro del componente "ProductCart". O sea, si yo hago click en este botón, este componente se entera que hice click. Si hago click aquí, este componente se entera de que hice click. Pero en general, el componente padre no se entera de este click y por lo tanto no puede agregar la información al carrito de compras. Veremos en la lección siguiente cómo lograr esta comunicación de un componente hijo a un componente padre.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript