Slots en Vue.js

Author
By Darío Rivera
Posted on 2020-10-09 in 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 cómo 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!.


Si te ha gustado este artículo puedes invitarme a tomar una taza de café

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.