Slots nombrados en Vue.js
En nuestro artículo anterior vimos una introducción a los Slots en Vue.js. Los slots aportan una gran flexibilidad en cuanto a cómo se renderiza un componente y dan la posibilidad de inyectarles contenido tal y como un elemento en bloque de HTML lo permite. Además de esto, Vue va mucho más allá permitiendo definir distintos segmentos o slots dentro de un mismo componente. El día de hoy veremos los slots nombrados.
Slots nombrados
Como ya se dijo es posible definir más de un slot en un mismo componente. Para reconocer cada slot individualmente debemos asignarle un nombre con el atributo name. En nuestro template podríamos tener algo como lo siguiente para la definición de un componente media.
<div class="media">
<slot name="img"></slot>
<div class="media-body">
<h5 class="m-2">
<slot name="title"></slot>
</h5>
<div class="ml-2">
<slot name="content"></slot>
</div>
</div>
</div>
Observa que hemos definido tres slots, uno para la imagen, otro para el título y otro para el contenido. Podríamos utilizar este componente en nuestro HTML de la siguiente forma:
<media>
<img src="http://lorempixel.com/100/100/" slot="img" />
<span slot="title">Random Image</span>
<p slot="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</media>
Puedes ver este ejemplo corriendo en codepen a continuación.
Slot por defecto
Podemos mejorar un poco el código anterior y utilizar el contenido por defecto del slot para mostrar una imagen random de la siguiente forma:
<slot name="img">
<img src="http://lorempixel.com/100/100/" />
</slot>
Otra cosa que podemos hacer es definir el slot por defecto. Resulta que si no definimos el atributo name en un slot, este será tomado como el slot por defecto. Nuestro template quedaría así:
<div class="media">
<slot name="img">
<img src="http://lorempixel.com/100/100/" />
</slot>
<div class="media-body">
<h5 class="m-2">
<slot name="title"></slot>
</h5>
<div class="ml-2">
<slot></slot>
</div>
</div>
</div>
De esta forma podemos simplificar un poco nuestro HTML sin tener que definir explicitamente el slot para el contenido.
<media>
<span slot="title">Random Image</span>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</media>
A continuación puedes ver este ejemplo corriendo en codepen:
Slots con la etiqueta template
Los slots sobre la etiqueta template debe ser definidos con el atributo v-slot. La ventaja de utilizar la etiqueta template es que te permite definir un slot con varios elementos sin tener que encapsultar todo en un elemento genérico como un div.
Tomando el ejemplo anterior, si quisieramos agregar más de un elemento al título sin encapsular todo en un div podríamos hacer lo siguiente:
<template v-slot:title>
<strong>Random</strong>
<span>Image</span>
</template>
Esta sintaxis está disponible desde la versión 2.6.0 de Vue. Antes de esta versión deberás utilizar sobre template el mismo atributo slot como vimos anteriormente.
v-slot:name
El resultado sería el que ves a continuación en codepen.