Slots en Vue
0. Introducción
En esta entrada del blog, exploraremos el uso de slots en Vue.js para crear componentes reutilizables y personalizables. Utilizaremos un ejemplo práctico de un supermercado para demostrar cómo los slots permiten una mayor flexibilidad al diseñar interfaces de usuario en aplicaciones Vue.
Antes de comenzar, nos podemos descargar este proyecto a través del siguiente enlace.
GitHub: https://github.com/PabloTrujillo08/Slots-Vue
1. Estructura Básica del Proyecto
Incluimos los enlaces necesarios para Vue.js y Bootstrap y, a continuación, creamos un contenedor div con el id «app» donde se montará nuestra aplicación Vue. En la parte final del código, dejamos espacio para el código de Vue.js que se insertará en pasos posteriores.
2. Creación del Componente SuperComponent
En este paso, nos centraremos en la creación del componente `SuperComponent` en Vue.js. Este componente actuará como un contenedor reutilizable para representar listas de productos, como los que encontraríamos en un supermercado. El componente hará uso de slots para permitir la personalización tanto del encabezado como de los elementos individuales de la lista.
-
Slot «header»:
- Permite la inserción de contenido personalizado para el encabezado del componente. El usuario puede definir y colocar cualquier contenido deseado dentro de este slot, proporcionando flexibilidad en la presentación del encabezado.
-
Slot «item»:
- Utiliza un bucle v-for para recorrer la lista de productos proporcionada a través del prop ‘items’.
- Cada elemento de la lista se pasa como una propiedad llamada ‘item’ al slot, permitiendo la personalización completa de la representación de cada ítem en la lista.
-
Props:
- El prop ‘items’ actúa como la lista de productos que se mostrará en el componente.
- Al proporcionar esta lista como prop, el componente se vuelve altamente adaptable, ya que puede mostrar diferentes conjuntos de datos sin necesidad de modificar su estructura interna.
3. Instanciación de Vue y Uso de SuperComponent
A continuación, nos enfocamos en la creación de una instancia de Vue y en cómo utilizamos el componente SuperComponent dentro de nuestra aplicación.
-
Creación de la Instancia Vue:
- ‘new Vue({…})’ : Creamos una nueva instancia de Vue, que es la raíz de nuestra aplicación. Esta instancia se encarga de manejar y gestionar los componentes y datos asociados.
-
Registro del componente SuperComponent: Utilizamos la opción components para registrar nuestro componente personalizado ‘super-component’ para que Vue lo reconozca.
-
Datos:
-
header: Representa el encabezado del supermercado.
-
supermercado: Es una lista de objetos que contienen información sobre productos, como nombre, cantidad y precio.
-
4. Uso de Slots en la Página HTML
En este paso, exploraremos cómo utilizamos el componente SuperComponent en la página HTML y cómo aprovechamos los slots para personalizar tanto el encabezado como la representación de cada ítem en la lista del supermercado.
- Instancia del Componente SuperComponent:
- <super-component :items=»supermercado»>: Creamos una instancia del componente SuperComponent en la página HTML.
- Utilizamos la directiva ‘:items’ para pasar la lista de productos (supermercado) como prop al componente.
- Slot «header»:
- <legend slot=»header»>{{header}}</legend>: Personalizamos el slot «header» utilizando la etiqueta <legend>, donde el contenido es el encabezado del supermercado ({{header}}).
- Se aplican estilos para mejorar la presentación.
- Slot «item»:
- <template slot=»item» slot-scope=»props»>: Utilizamos un slot de tipo template con nombre «item» para personalizar la representación de cada ítem en la lista.
- slot-scope=»props»:
-
Permite acceder a las propiedades del ítem dentro del slot.
-
En el interior del slot «item», creamos una tabla con las columnas «Nombre del producto», «Cantidad disponible» y «Precio». Utilizamos props.item para acceder a las propiedades de cada ítem.
5. Resultado en Navegador
Después de seguir los pasos anteriores y cargar la aplicación en el navegador, veremos el resultado final de nuestra interfaz de usuario construida con Vue.js y el componente SuperComponent.
6. Conclusiones
Hemos explorado los slots y cómo pueden potenciar nuestras aplicaciones web.
El componente SuperComponent que hemos construido no solo representa un supermercado, sino también una puerta abierta a la reutilización de código y a la adaptabilidad en el diseño de interfaces.
Los slots nos ofrecen la capacidad de personalizar cada detalle de nuestros componentes, desde el encabezado hasta la representación individual de los elementos de la lista. Esta versatilidad es clave para construir aplicaciones dinámicas y visualmente atractivas.
No olvidéis echar un vistazo al videotutorial y os animo a dejar cualquier comentario con vuestras dudas.
Autor: Pablo Trujillo Avendaño
Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS
Centro: Tajamar Tech
Año académico: 2023-2024
GitHub: https://github.com/PabloTrujillo08/Slots-Vue