Props: De padre a 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 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.

Crea una cuenta y continúa aprendiendo 🚀

Props: De padre a hijo