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
Props: De padre a hijo
Veamos qué son y cómo definir Props. Aprendamos a enviar datos desde un componente padre hacia un componente hijo.
ProductCard en Vue 3
Un ProductCard tiene un nombre y tiene un precio.
Dentro de templates tenemos dos etiquetas. Esto es algo que podemos hacer en Vue 3 y que no era posible en Vue 2.
En Vue 2 siempre tenía que existir solamente una etiqueta raíz.
En Vue 3 podemos tener cuantas queramos.
En este caso, vamos a agregar una etiqueta HR para que haya una separación entre un "card" y el siguiente, consiguiendo este resultado.
Sin embargo, a pesar que tenemos tres "cards", los tres siguen mostrando la misma información.
Esto se debe a que este ProductCard tiene un estado product con valores definidos dentro del mismo componente.
Uso de Props
Lo que queremos es que esta información venga desde el componente padre hacia este componente.
Que cualquiera que vaya a usar un "card" pueda definir el name y el price, o en general el product, pasarlo al "card" y que el "card" sea el responsable de mostrar esta información.
En este caso, no queremos definir una variable de estado aquí, sino que queremos recibir esta información desde el exterior.
A esto se le conoce como props o properties.
Podemos declarar propiedades para nuestros componentes.
Declaración de Props
¿De qué manera se declaran las propiedades?
La manera más sencilla es a través de un arreglo.
Entonces vamos a quitar todo esto y simplemente vamos a poner props.
Vamos a informar que a través de props vamos a recibir un objeto product.
Entonces, cuando alguien vaya a usar este ProductCard, va a tener que definir una propiedad product.
Luego nosotros, a partir de allí, vamos a mostrar esto.
Aquí tenemos que definir una propiedad product.
Para definir una propiedad usamos :product, y pasamos aquí product.
Este product que está acá es el nombre del prop, mientras que este product acá se refiere a cada producto que está dentro de products.
Uso de v-for
Aquí nosotros podemos agregar algunos saltos de línea para que se comprenda mejor.
La directiva v-for nos permite iterar sobre products y acceder a cada elemento con este nombre.
Mientras que estos dos puntos nos permiten definir un valor para los props de este componente.
Si queremos, podemos referirnos acá a los elementos simplemente como P y aquí entonces sería P.
Para que se entienda mejor la diferencia.
Entonces guardamos y al volver al navegador nos encontramos con los tres productos que hemos definido:
- Nombre, precio
- Nombre, precio
- Nombre, precio
Los productos se están definiendo dentro de ProductList como el estado de este componente padre.
Sin embargo, luego nosotros renderizamos tres veces el componente ProductCard, mostramos tres "cards" gracias a esta directiva v-for.
Pero como el componente necesita de un prop llamado product porque eso es lo que hemos definido,
tenemos que pasarle un producto y luego el componente ProductCard se encargará de mostrar la información que corresponde.
Importancia de los Props
Es importante que te familiarices con el uso de props, ya que es muy importante para comunicar componentes.
En este caso, para enviar información desde un componente padre hacia un componente hijo.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Un “ProductCard” tiene un nombre y tiene un precio. Dentro de templates tenemos dos etiquetas. Esto es algo que podemos hacer en Vue 3 y que no era posible en Vue 2. En Vue 2 siempre tenía que existir solamente una etiqueta raíz. En Vue 3 podemos tener cuantas queramos. En este caso vamos a agregar una etiqueta HR para que haya una separación entre un "card" y el siguiente, consiguiendo este resultado. Sin embargo, a pesar que tenemos tres "cards", los tres siguen mostrando la misma información. Esto se debe a que este “ProductCard” tiene un estado "product" con valores definidos dentro del mismo componente. Lo que queremos es que esta información venga desde el componente padre hacia este componente, que cualquiera que vaya a usar un "card" pueda definir el “name” y el “price”, o en generar el "product", pasarlo al "card" y que el "card" sea el responsable de mostrar esta información. Entonces, en este caso no queremos definir una variable de estado aquí, sino que queremos recibir esta información desde el exterior. A esto se le conoce como props o properties. Podemos declarar propiedades para nuestros componentes. ¿De qué manera se declaran las propiedades? La manera más sencilla es a través de un arreglo. Entonces vamos a quitar todo esto y simplemente vamos a poner props. Vamos a informar que a través de props vamos a recibir un objeto "product". Entonces, cuando alguien vaya a usar este “ProductCard”, va a tener que definir una propiedad "product". y luego nosotros a partir de allí vamos a mostrar esto. Entonces aquí tenemos que definir una propiedad "product". Para definir una propiedad usamos “:product”, y pasamos aquí "product". Este "product" que está acá es el nombre del prop. Mientras que este "product" acá se refiere a cada producto que está dentro de "products". Aquí nosotros podemos agregar algunos saltos de línea para que se comprenda mejor, la directiva “v-for” nos permite iterar sobre "products" y acceder a cada elemento con este nombre. Mientras que estos dos puntos nos permiten definir un valor para los props de este componente, Si queremos, podemos referirnos acá de elementos simplemente como “P” y aquí entonces sería “P”. Para que se entienda mejor la diferencia. Entonces guardamos y al volver al navegador nos encontramos con los tres productos que hemos definido nombre, precio, nombre, precio y nombre precio. Los productos se están definiendo dentro de “ProductList” como el estado de este componente padre. Sin embargo, luego nosotros renderizamos tres veces el componente “ProductCard”, mostramos tres "cards" gracias a esta directiva “v-for”. Pero como el componente necesita de un prop llamado "product" porque eso es lo que hemos definido, tenemos que pasarle un producto y luego el componente “ProductCard” se encargará de mostrar la información que corresponde. Es importante que te familiarices con el uso de props, ya que es muy importante para comunicar componentes. En este caso, para enviar información desde un componente padre hacia un componente hijo.
¿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