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>

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.