Slots en Vue.js

Author
Por Darío Rivera
Publicado el 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!.


Acerca de Darío Rivera

Author

Application Architect at Elentra Corp . Quality developer and passionate learner with 10+ years of experience in web technologies. Creator of EasyHttp , an standard way to consume HTTP Clients.

LinkedIn Twitter Instagram

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