Slots Nomeados no Vue.js

Em alguns casos, pode ser necessário definir múltiplos slots dentro de um componente para permitir a inserção de conteúdos distintos. Para isso, cada slot pode receber um nome específico, e o componente pai pode enviar conteúdo a ele com base nesse nome. O Vue.js permite essa funcionalidade através dos slots nomeados (named slots). O atributo name no elemento <slot> estabelece essa associação.

O exemplo a seguir demonstra a utilização de slots nomeados:

<!DOCTYPE html>
<html lang="pt">
  <head>
    <title>Slots Vue 3</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <container>
        <template v-slot:header>
          <h1>Título do artigo</h1>
        </template>

        <template v-slot:default>
          <p>Primeiro parágrafo.</p>
          <p>Segundo parágrafo.</p>
        </template>

        <template v-slot:footer>
          <p>Para mais informações, entre em contato pelo e-mail contacts@gmail.com</p>
        </template>
      </container>
    </div>

    <script>
      const app = Vue.createApp({});

      app.component("container", {
        template: `<div>
                        <header>
                            <slot name="header"></slot>
                        </header>
                        <article>
                            <slot></slot>
                        </article>
                        <footer>
                            <slot name="footer"></slot>
                        </footer>
                    </div>`,
      });

      app.mount("#app");
    </script>
  </body>
</html>

O componente container define três slots: dois nomeados (header e footer) e um sem nome explícito. Quando um slot não possui um atributo name, ele é identificado automaticamente como default.

O componente filho estabelece a estrutura de exibição do conteúdo. No componente pai, os slots são preenchidos utilizando <template v-slot:nome-do-slot>, onde nome-do-slot corresponde ao nome do slot definido no componente filho.

No código acima:

O conteúdo dentro de <template v-slot:header> será inserido no slot header.
O conteúdo dentro de <template v-slot:default> será inserido no slot padrão, que não possui um nome explícito.

Após a renderização, a estrutura final será:

<div>
  <header>
    <h1>Título do artigo</h1>
  </header>
  <article>
    <p>Primeiro parágrafo.</p>
    <p>Segundo parágrafo.</p>
  </article>
  <footer>
    <p>Para mais informações, entre em contato pelo e-mail contacts@gmail.com</p>
  </footer>
</div>

Slots nomeados no Vue.js

Conteúdo Padrão nos Slots

Caso o componente pai não forneça conteúdo para os slots, o componente filho pode definir um conteúdo padrão. O código abaixo ilustra esse comportamento:

<!DOCTYPE html>
<html lang="pt">
  <head>
    <title>Slots Vue 3</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <container>
        <template v-slot:default>
          <p>Primeiro parágrafo.</p>
          <p>Segundo parágrafo.</p>
        </template>
      </container>
    </div>

    <script>
      const app = Vue.createApp({});

      app.component("container", {
        template: `<div>
                        <header>
                            <slot name="header">
                                <h2>Título padrão</h2>
                                <p>Data do artigo: {{ new Date().toLocaleDateString() }}</p>
                            </slot>
                        </header>
                        <article>
                            <slot></slot>
                        </article>
                        <footer>
                            <slot name="footer">
                                <h5>Copyright©2025</h5>
                            </slot>
                        </footer>
                    </div>`,
      });

      app.mount("#app");
    </script>
  </body>
</html>

Caso o componente pai não forneça conteúdo para os slots nomeados, o Vue exibirá os valores padrão definidos no componente filho. Assim, se o slot header não for preenchido, ele mostrará um título padrão e a data do artigo. Da mesma forma, o slot footer exibirá um aviso de direitos autorais.

Conteúdo padrão nos slots nomeados no Vue.js

Resumo

Slots podem ser nomeados com o atributo name, enquanto slots sem nome são identificados como default.
O componente pai preenche os slots do filho usando <template v-slot:nome-do-slot>.
O Vue permite definir conteúdo padrão nos slots do componente filho para casos em que nenhum conteúdo seja fornecido pelo componente pai.

Documentação oficial:

Slots Nomeados