Slots e slots com escopo
Componha componentes flexíveis usando slots e slots com escopo.
Slots e slots com escopo é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 3. 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 3 aulas no total.
O que são slots?
Slots permitem que um pai injete conteúdo no modelo de um componente filho.
- Props passam dados; slots passam marcação
- São ótimos para contêineres de layout, cartões e janelas modais
- O filho decide onde o conteúdo será inserido
O slot padrão
Um filho define um espaço reservado com o elemento slot. Tudo o que o pai colocar entre as tags preencherá esse espaço.
<!-- Card.vue (child) -->
<template>
<div class="card">
<slot></slot>
</div>
</template>Usando o slot padrão
O pai passa conteúdo entre as tags do componente.
<!-- Parent -->
<Card>
<h2>Title</h2>
<p>Any content goes here.</p>
</Card>
<!-- It renders inside the card div -->Conteúdo alternativo do slot
Um slot pode fornecer conteúdo alternativo, exibido quando o pai não passa nada.
<!-- Button.vue -->
<template>
<button>
<slot>Click me</slot>
</button>
</template>
<!-- <Button /> shows "Click me";
<Button>Save</Button> shows "Save" -->Vários slots nomeados
Slots nomeados permitem que um componente ofereça vários pontos de inserção.
<!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</template>Preenchendo slots nomeados
O pai direciona o conteúdo a um slot nomeado com v-slot:name em uma tag de modelo.
<Layout>
<template v-slot:header>
<h1>Site Title</h1>
</template>
<p>Main content (default slot)</p>
<template v-slot:footer>
<small>Copyright 2024</small>
</template>
</Layout>Forma abreviada de v-slot
v-slot tem uma forma abreviada: o símbolo #.
<Layout>
<template #header>
<h1>Title</h1>
</template>
<template #footer>
<small>Footer</small>
</template>
</Layout>Slots com escopo
Slots com escopo permitem que o filho passe dados para o conteúdo do slot.
- O filho vincula dados no elemento slot
- O pai os recebe como props do slot
- São úteis quando o filho controla os dados, mas o pai controla a aparência
Expondo dados de um filho
O filho vincula atributos no slot para compartilhar dados.
<!-- UserList.vue -->
<template>
<li v-for="user in users" :key="user.id">
<slot :user="user"></slot>
</li>
</template>Consumindo dados de um slot com escopo
O pai recebe os dados por meio de v-slot.
<UserList>
<template #default="slotProps">
{{ slotProps.user.name }}
</template>
</UserList>
<!-- or destructure: #default="{ user }" -->Quando usar cada slot
Guia rápido:
- Slot padrão para uma simples inserção de conteúdo
- Slots nomeados para várias regiões (layout)
- Slots com escopo quando o pai precisa dos dados internos do filho
Verificação rápida
Teste sua compreensão sobre slots.
Recapitulação: slots
Você aprendeu sobre a distribuição de conteúdo com slots:
- O slot padrão insere a marcação do pai
- O conteúdo alternativo aparece quando nada é passado
- Slots nomeados (v-slot:name, forma abreviada #) direcionam regiões
- Slots com escopo passam dados do filho para o conteúdo do slot
Próximo: fundamentos da reatividade.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Slots e slots com escopo” é grátis?
Sim — o texto completo de “Slots e slots com escopo” é 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 3 aulas no total.
O que vou aprender em “Slots e slots com escopo”?
Componha componentes flexíveis usando slots e slots com escopo. 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 3 de 3.
Quanto tempo leva a aula “Slots e slots com escopo”?
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
- Criação e registro de componentes
- Props e eventos personalizados
- Slots e slots com escopo