Componente hijo: ProductCard

Aquí tenemos nuestro componente "ProductList". Este componente tiene tres productos y los estamos mostrando usando un "v-for". Sin embargo, tal como hemos comentado, no es necesario usar un “li”, podemos usar cualquier tipo de etiqueta HTML o cualquier componente de Vue. Entonces, para demostrar esto, vamos a agregar un archivo nuevo y vamos a crear un componente llamado "ProductCard". Este componente va a constar de dos etiquetas con etiqueta script y una etiqueta template. Para empezar, vamos a darle un estado a este componente y vamos a definir un solo producto a través de un objeto. Aquí tenemos una variable de estado “product” que es un objeto y que contiene dos datos simplemente. Y ahora vamos a definir el template. ¿Cómo se va a ver este component?. Por ahora simplemente vamos a poner un párrafo con el nombre del producto y otro párrafo con el precio. Ahora vamos a reemplazar nuestro componente "ProductList" para que muestre tres tarjetas, tres “ProductCards”. ¿Como hacemos ello? Pues escribimos “ProductCard” y sobre este “ProductCard” le vamos a poner un "v-for". Hasta aquí si nos vamos al navegador no encontramos nada. Y de hecho, si presionamos F12 y nos encontramos con un warning. Nos dice que no se pudo resolver el componente “ProductCard”. Esto ocurre porque si tú quieres usar un componente tienes que importarlo en el componente que lo va a usar. Entonces, en este caso, entonces en este caso vamos a importar el componente “ProductCard”. Si te aparece un mensaje como este de aquí de que no se encuentra, debes revisar también el nombre de tu archivo, porque es importante que el componente termine en “.vue”. Para que de esta manera se reconozca como un componente y se puede importar de esta manera. En el caso de Options API, además de importar el archivo que hemos creado, tenemos que declarar esto como un componente. Entonces vamos a definir aquí una sección de components, generalmente lo hacemos antes de "data" para declarar qué componentes puede usar el componente actual. En este caso vamos a declarar “ProductCard”. Estamos importando “ProductCard” y luego estamos declarando “ProductCard” como un componente que se va a usar desde "ProductList". Esto es una manera local de registrar un componente. También hay formas globales de registrar componentes. Si un componente se va a usar solamente dentro de otro, nos conviene registrarlo de manera local, como aquí estamos viendo. Entonces, al volver al navegador nos encontramos con esto. Nombre y precio Nombre y precio. Nombre y precio. Estamos imprimiendo tres veces el componente “ProductCard”. Gracias a esta directiva. "v-for" En la lección siguiente vamos a ver cómo podemos enviar datos desde este componente padre sobre este componente hijo.

Crea una cuenta y continúa aprendiendo 🚀

Componente hijo: ProductCard