Slots com escopo: passagem de dados ao componente pai
slot :data='value', v-slot='{ data }' no lado do componente pai e padrão de propriedade de renderização.
Slots com escopo: passagem de dados ao componente pai é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 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.
A limitação das áreas simples
As áreas de inserção simples permitem que o pai passe marcação para o filho, mas o pai não consegue acessar os dados internos do filho. As áreas de inserção com escopo resolvem isso permitindo que o filho exponha dados de volta ao conteúdo da área.
Associando dados a uma área de inserção
O filho associa atributos ao elemento <slot>, chamados de slotProps. Esses atributos são passados para tudo o que o pai renderizar.
<!-- List.vue -->
<ul>
<li v-for="(item, i) in items" :key="item.id">
<slot :item="item" :index="i"></slot>
</li>
</ul>Recebendo slotProps
No componente pai, o valor de v-slot se torna um objeto que contém todos os slotProps associados pelo filho.
<List :items="users">
<template v-slot:default="slotProps">
{{ slotProps.index }}: {{ slotProps.item.name }}
</template>
</List>Desestruturando slotProps
Como o valor da área de inserção é apenas um objeto, você pode desestruturá-lo diretamente para deixar o código mais limpo.
<List :items="users">
<template v-slot:default="{ item, index }">
{{ index }}: {{ item.name }}
</template>
</List>Forma abreviada para a área padrão com escopo
Quando você usa apenas a área padrão, pode colocar v-slot diretamente na tag do componente, em vez de usar um modelo aninhado.
<List :items="users" v-slot="{ item }">
{{ item.name }}
</List>Renomeação e valores padrão
A desestruturação permite renomear valores e definir valores padrão, assim como no JavaScript normal.
<template v-slot:default="{ item: user, index = 0 }">
{{ index }} - {{ user.name }}
</template>Áreas nomeadas com escopo
As áreas nomeadas também podem ter escopo. Combine o nome com os props desestruturados.
<DataTable :rows="rows">
<template #cell="{ value, column }">
<strong>{{ column }}: {{ value }}</strong>
</template>
</DataTable>Componentes sem renderização
As áreas de inserção com escopo permitem o padrão de componente sem renderização: um componente gerencia a lógica e o state, mas não renderiza sua própria marcação; ele apenas expõe dados por meio de uma área com escopo e deixa o pai decidir a interface.
Um rastreador de ponteiro sem renderização
O componente acompanha o ponteiro e expõe as coordenadas. Ele renderiza apenas sua área de inserção padrão, passando x e y.
<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>Usando o componente sem renderização
O componente pai fornece todos os elementos visuais e lê os dados expostos, separando completamente a lógica da apresentação.
<Mouse v-slot="{ x, y }">
<p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>Áreas com escopo versus funções reutilizáveis
As funções reutilizáveis frequentemente substituem os componentes sem renderização no Vue 3 quando o objetivo é reutilizar apenas a lógica. Mas as áreas com escopo ainda são melhores quando o filho precisa controlar a iteração ou a estrutura, como em uma lista ou tabela, enquanto o pai personaliza cada item.
Verificação rápida
Como um componente pai recebe os dados expostos por uma área de inserção com escopo?
Recapitulação
Você aprendeu que as áreas de inserção com escopo permitem que um filho exponha dados para o pai ao associar props ao seu <slot>. O pai os lê por meio do valor de v-slot, geralmente desestruturado, permitindo criar componentes sem renderização que separam a lógica da apresentação.
Perguntas Frequentes
A aula “Slots com escopo: passagem de dados ao componente pai” é grátis?
Sim — o texto completo de “Slots com escopo: passagem de dados ao componente pai” é 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 com escopo: passagem de dados ao componente pai”?
slot :data='value', v-slot='{ data }' no lado do componente pai e padrão de propriedade de renderização. 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 2 de 4.
Quanto tempo leva a aula “Slots com escopo: passagem de dados ao componente pai”?
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