El Slot en Vue es una funcionalidad inspirada en la especificación de Wed Components con la finalidad de poder definir zonas de contenido distribuido. Es por ello que en este artículo se presentan las principales características, su sintaxis y un ejemplo real de implementación en Vue.Js.
Código
En los ejemplos que se presenta a continuación, se trata de explicar un poco mejor las características de los slots y todo el potencial que se puede extraer de ellos.
Slot simple
El ejemplo más sencillo que se puede presentar es el slot básico. Cuando el componente hijo (o abstracto) sea renderizado, el tag <slot></slot> será remplazado por «Slot content». El contenido «Slot content» puede ser código, incluso HTML que contiene otros tags o componentes.
// HTML
<div id="root">
<tx-card>Slot content</tx-card>
</div>
// JS
Vue.component('tx-card', {
template: `
<div class="card">
<slot></slot>
</div>`,
})Nombre en el slot
Es muy habitual que sea necesaria especificar más de un slot. Para realizar esta tarea, existe una funcionalidad especifica, la funcionalidad es poder designar cada uno de los slots con un nombre.
En el ejemplo que se muestra a continuación, se crea una tarjeta con un panel para añadir un header y otra zona en donde definir el contenido de la tarjeta.
// HTML
<div id="root">
<tx-card>
<h1 slot="header">
Slot content
</h1>
<p slot="body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</tx-card>
</div>
// JS
Vue.component('tx-card', {
template: `
<div class="card">
<div class="header">
<slot name="header"></slot>
</div>
<div class="body">
<slot name="body"></slot>
</div>
</div>`,
})Ejemplo de tarjeta
Finalmente, en este apartado dejo un ejemplo muy simple de tarjeta con un CSS mínimo para diferenciar las partes que la componen.
El ejemplo anterior está alojado en JSFiddle, por lo tanto podéis probar y testear todo lo que queráis con esta propuesta sencilla de componente.
Conclusión
Esta funcionalidad descrita en el artículo es muy útil a la hora de desarrollar componentes genéricos. La funcionalidad permite al desarrollador que está utilizando tu componente una mayor flexibilidad para seguir utilizando tu componente y adaptarlo a sus necesidades especificas.
Por lo tanto, si tu intención es crear un componente reutilizable (ya sea por ti mismo o un componente genérico) y quieres definir una estructura básica pero a la vez dejar la decisión final al desarrollador, esta funcionalidad es necesaria para ti.
