Para que servem os slots no Vue e como funcionam…

Os slots no Vue são usados para inserir conteúdo externo nos componentes. Isso permite criar componentes flexíveis e reutilizáveis.

Existem três tipos de slots:

Slots padrão (Default Slots): Usados para inserir conteúdo principal.

<template>
  <div>
    <slot></slot>
  </div>
</template>

Uso:

<o-meu-componente>
  <p>Este conteúdo será inserido no slot padrão.</p>
</o-meu-componente>

Slots nomeados (Named Slots): Permitem inserir conteúdo em slots específicos dentro do componente, diferenciados pelo nome.

<template>
  <div>
    <slot name="header"></slot>
    <div>Conteúdo principal do componente</div>
    <slot name="footer"></slot>
  </div>
</template>

Uso:

<o-meu-componente>
  <template v-slot:header>
    <h2>Título</h2>
  </template>
  <template v-slot:footer>
    <p>Rodapé</p>
  </template>
</o-meu-componente>

Sintaxe abreviada para v-slot:

<o-meu-componente>
  <template #header>
    <h2>Título (sintaxe abreviada)</h2>
  </template>
</o-meu-componente>

Slots com escopo limitado (Scoped Slots): Permitem que o componente filho envie dados ao componente pai através do slot. O pai pode usar esses dados ao renderizar o conteúdo do slot.

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item" :index="index"></slot>
    </li>
  </ul>
</template>

Uso:

<minha-lista :items="['Maçã', 'Banana', 'Laranja']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</minha-lista>

Desestruturação de slotProps:

<minha-lista :items="['Maçã', 'Banana', 'Laranja']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Desestruturação)
  </template>
</minha-lista>

Os slots funcionam criando "espaços" dentro do template do componente filho, onde o pai pode inserir seu próprio conteúdo. Quando renderizado, Vue substitui a tag <slot> (ou <slot name="...">) pelo conteúdo fornecido pelo componente pai. No caso de slots com escopo, os dados do componente filho estão disponíveis através do objeto de argumentos do template do slot no componente pai.

Para que servem os slots no Vue e como funcionam?