Slots en Vue.js
El concepto de Slot es difícil de definir pero fácil de entender viendo unos pocos ejemplos. Un slot es como un fragmento de componente al cuál se le puede inyectar contenido. Esto permite que podamos utilizar los componentes de Vue de la misma forma como funciona un elemento de bloque en HTML permitiéndole anidar otros elementos dentro de él.
<div id="app" class="m-2">
<x-button type="danger">
<strong>Click</strong>
for more info!
</x-button>
</div>Observa como en el HTML anterior utilizamos el elemento strong dentro de nuestro componente x-button. Veamos a continuación esto a más detalle.
Slots
El contenido de un componente dentro de las etiquetas que lo definen es por default un slot. En el ejemplo anterior el slot sería el siguiente:
<strong>Click</strong>
for more info!
Para que este contenido sea inyectado en el componente es necesario utilizar la etiqueta slot en la definición del template.
Vue.component('x-button', {
props: ['type'],
computed: {
className: function() {
return `btn-${this.type}`;
},
},
template: `
<button
type="button"
:class="['btn', className]"
@click="$emit('click', $event)"
>
<slot></slot>
</button>
`
})
var vue = new Vue({
el: "#app"
});
Contenido por defecto de un Slot
Podemos cambiar un poco el código anterior y utilizar el contenido por defecto del slot para mostrar un texto por defecto en el botón. Esto se logra agregando dicho contenido dentro de la etiqueta slot.
<button
type="button"
:class="['btn', className]"
@click="$emit('click', $event)"
>
<slot>Action</slot>
</button>si no definidos ningún contenido dentro de nuestro componente se renderizará el contenido por defecto del slot. A continuación puedes ver el ejemplo en codepen.
También existe la posibilidad de tener más de un Slot en un mismo componente. Te invitó a revisar nuestro artículo Slots nombrados en Vue.js. Hasta la próxima!.