Slots nomeados e slot padrão
Vários , e sintaxe abreviada #name.
Slots nomeados e slot padrão é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
O que são áreas de inserção
As áreas de inserção permitem que um componente pai passe marcação para um componente filho. O filho decide onde esse conteúdo aparece usando o elemento <slot>. Essa é a distribuição de conteúdo do Vue.
A área de inserção padrão
Um <slot> sem nome é a área de inserção padrão. Tudo o que o pai colocar entre as tags do componente será inserido ali.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>Usando a área de inserção padrão
O componente pai simplesmente aninha o conteúdo dentro das tags do componente.
<Card>
<p>This goes into the default slot</p>
</Card>Por que usar áreas nomeadas
Muitos componentes têm vários pontos de inserção: um cabeçalho, um corpo e um rodapé. As áreas de inserção nomeadas dão um identificador a cada região, para que o pai possa direcioná-las individualmente.
Declarando áreas de inserção nomeadas
Adicione um atributo name a cada área de inserção. Um componente pode combinar áreas nomeadas e uma área padrão, sem nome.
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>Preenchendo áreas nomeadas com a diretiva de slot
No componente pai, envolva o conteúdo em um <template> com a diretiva v-slot:name para direcioná-lo a uma área nomeada.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>A forma abreviada com #
v-slot: tem uma forma abreviada: #. Assim, v-slot:header se torna #header. Esta é a forma idiomática e concisa.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>Conteúdo padrão entre os elementos
O conteúdo colocado diretamente entre as tags do componente, e não dentro de um modelo nomeado, vai para a área de inserção padrão. Você também pode direcioná-lo explicitamente com #default.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>Combinando o implícito e o explícito
Você pode escrever o conteúdo padrão de forma livre e as áreas nomeadas por meio de modelos na mesma utilização. O Vue encaminha cada parte para o lugar certo pelo nome.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>Ordem de renderização
A ordem das áreas de inserção no componente pai não importa: o modelo do componente filho controla o layout final. O conteúdo de uma área sempre aparece onde o filho colocou a área <slot> correspondente.
Um componente prático de estrutura
As áreas de inserção nomeadas permitem criar estruturas reutilizáveis. Um <BaseLayout> pode hospedar qualquer página ao aceitar áreas de cabeçalho, barra lateral e conteúdo principal.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>Verificação rápida
Qual é a forma abreviada de v-slot:header?
Recapitulação
Você aprendeu que as áreas de inserção distribuem a marcação do componente pai em um componente filho. Um <slot> sem nome é a área padrão; adicionar name cria áreas nomeadas. Os componentes pais as preenchem com <template v-slot:name> ou com a forma abreviada #name, e o modelo do filho decide a posição final.
Perguntas Frequentes
A aula “Slots nomeados e slot padrão” é grátis?
Sim — o texto completo de “Slots nomeados e slot padrão” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Slots nomeados e slot padrão”?
Vários , e sintaxe abreviada #name. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Slots nomeados e slot padrão”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Slots nomeados e slot padrão
- Slots com escopo: passagem de dados ao componente pai
- Nomes dinâmicos de slots
- Conteúdo alternativo de slots e verificação de slots