Validar Props con Vuejs 2
Validar Props con Vuejs 2
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


Los Slots en Vue.js 2 nos ayudan a distribuir nuestras templates, además, en Vue.js 2 han mejorado ya que ahora podemos crear slots pasando datos para hacerlos más dinámicos, estos datos se pasan a través de atributos del componente y son llamados props.


Existen varios casos típicos de uso, el diseño de layouts a través de slots o utilizando listas para mostrar datos de forma más dinámica, en este caso vamos a ver algunos casos prácticos.

El caso más sencillo de un Slot en Vue.js 2 es el siguiente.

Y para utilizar el slot que hemos creado anteriormente simplemente podemos hacer lo siguiente.

En el caso anterior, el texto que hemos definido dentro del tag slot no aparecerá porque a la hora de utilizar el slot con my-component hemos añadido texto dentro, si dejas el contenido de my-component vacío verás que aparece el texto.

Otro caso más práctico es crear Slots con nombres para que puedan ser identificados como bloques.

Puedes ver que ahora tenemos slots diferenciados con nombres, esta template simplemente define un layout que puede ser útil para muchas aplicaciones, pues para utilizarlo simplemente debemos hacer lo siguiente.

Cómo ya hemos dicho, los Slots desde Vue.js 2.1 aceptan datos, para entenderlo mejor vamos a modificar el componente que representa un layout.

Y para poder utilizarlo simplemente le tenemos que asignar el atributo scope=”props” o scope=”myprops”, simplemente es un alias, una vez hecho, podemos hacer uso del texto definido previamente de la siguiente forma.

Otra cosa muy interesante es poder crear listas de datos de forma dinámica, en lugar de definir un valor desde el slot de forma estática, lo vamos a hacer de forma dinámica.

Puedes ver que simplemente se trata de un componente con un slot que tiene un v-for y texto, pero al igual que tenemos un texto, podemos tener muchos más datos, para utilizar el anterior componente simplemente debemos pasarle los items y todo estará funcionando.

Te invito a revisar la documentación sobre los Slots en Vue.js 2 para que puedas profundizar más sobre este tema ya que es algo imprescindible en cualquier aplicación.