Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
Veamos qué son y cómo definir Props. Aprendamos a enviar datos desde un componente padre hacia un componente hijo.
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 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.
¿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
.
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:
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.
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
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.