Slots
Em Vue.js, os Slots são uma funcionalidade essencial para criar componentes reutilizáveis e altamente flexíveis. Eles permitem que conteúdo seja passado de um componente pai para um componente filho, separando a lógica da apresentação e promovendo modularidade e manutenibilidade. Com Slots, os desenvolvedores podem criar componentes que aceitam conteúdo dinâmico e customizável, fundamental em sistemas complexos e arquiteturas escaláveis.
Slots são particularmente úteis em situações como cartões (Cards), modais (Modals), formulários dinâmicos e painéis de interface reutilizáveis. Vue.js oferece três tipos principais de Slots: Slot padrão (Default Slot), Slot nomeado (Named Slot) e Slot com escopo (Scoped Slot). O Slot padrão exibe conteúdo caso nenhum seja fornecido pelo pai, o Slot nomeado permite definir múltiplas áreas de conteúdo distintas, e o Scoped Slot passa dados do filho para o pai para renderização dinâmica.
Neste tutorial avançado, você aprenderá a utilizar cada tipo de Slot, manipular dados transmitidos via Scoped Slots, e aplicar essas técnicas em projetos reais com Vue.js. Além disso, abordaremos melhores práticas de desenvolvimento, otimizações de performance e estratégias para evitar problemas comuns, como vazamentos de memória e erros na manipulação de dados.
Exemplo Básico <template>
text<div class="card">
<slot>
Conteúdo padrão: nenhum conteúdo foi fornecido pelo pai.
</slot>
</div>
</template>
<script>
export default {
name: "BaseCard"
};
</script>
<style scoped>
.card {
border: 1px solid #ccc;
padding: 16px;
border-radius: 8px;
}
</style>
<!-- Uso -->
<BaseCard>
<p>Este é o conteúdo fornecido pelo componente pai.</p>
</BaseCard>No exemplo acima, o componente BaseCard possui um Slot padrão definido com
Exemplo Prático <template>
text<div class="modal">
<header class="modal-header">
<slot name="header">
<h2>Título Padrão</h2>
</slot>
</header>
<section class="modal-body">
<slot :user="userData">
<p>Mensagem padrão</p>
</slot>
</section>
<footer class="modal-footer">
<slot name="footer">
<button @click="closeModal">Fechar</button>
</slot>
</footer>
</div>
</template>
<script>
export default {
name: "UserModal",
data() {
return {
userData: { name: "João Silva", role: "Admin" }
};
},
methods: {
closeModal() {
console.log("Modal fechado");
}
}
};
</script>
<style scoped>
.modal { border: 1px solid #333; padding: 20px; border-radius: 10px; background: #f9f9f9; }
.modal-header, .modal-footer { padding: 10px; background: #eee; }
</style>
<!-- Uso -->
<UserModal>
<template #header>
<h1>Detalhes do Usuário</h1>
</template>
<template #default="{ user }"> <p>Nome: {{ user.name }}</p> <p>Função: {{ user.role }}</p> </template>
<template #footer>
<button @click="customClose">Fechar Personalizado</button> </template> </UserModal>Neste exemplo avançado, utilizamos Slots nomeados (#header e #footer) e um Scoped Slot (#default="{ user }"). Os Slots nomeados permitem ao pai definir áreas específicas do componente filho, enquanto o Scoped Slot fornece dados do filho ao pai para renderização dinâmica. Essa abordagem é ideal para modais, formulários dinâmicos e listas de cartões, separando claramente lógica e apresentação. O uso correto de v-slot e da sintaxe # garante templates legíveis e manuteníveis. Além disso, a utilização de v-if e v-for de forma otimizada previne renderizações desnecessárias, aumentando a performance do componente.
Melhores práticas e armadilhas comuns no uso de Slots em Vue.js:
- Nomeie seus Slots de forma clara e semântica.
- Evite renderizar grandes blocos de conteúdo dinâmico sem otimização.
- Valide dados recebidos em Scoped Slots antes de usá-los.
- Use v-if e v-for de forma eficiente para reduzir operações no DOM.
- Evite injetar HTML diretamente para prevenir vulnerabilidades XSS.
- Utilize Vue DevTools para depuração de fluxo de dados e Slots.
- Não inclua lógica complexa dentro de Slots; siga o princípio da responsabilidade única (Single Responsibility).
📊 Tabela de Referência
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| slot | Ponto de inserção do conteúdo do pai | <slot>Conteúdo padrão</slot> |
| Named Slot | Permite múltiplas áreas de conteúdo | <slot name="header">Título Padrão</slot> |
| Scoped Slot | Passa dados do filho para o pai | <slot :user="userData"></slot> |
| #slot | Atalho para Slots nomeados | <template #footer>Botão</template> |
| v-slot | Sintaxe moderna para Named e Scoped Slots | <template v-slot:default="{ user }">{{ user.name }}</template> |
Aprender a utilizar Slots é fundamental para criar componentes Vue.js moduláveis e personalizáveis. Os conceitos principais incluem Slots padrão, nomeados e Scoped, permitindo passar dados dinamicamente do filho para o pai e renderizar conteúdo de forma flexível. Combinados com gerenciamento de estado (Vuex/Pinia), renderização dinâmica e Composition API, os Slots se tornam poderosos para projetos complexos. Em aplicações reais, como modais, listas de cartões e formulários dinâmicos, seguir melhores práticas garante performance, segurança e facilidade de manutenção. Para aprofundar, recomenda-se estudar a documentação oficial do Vue.js e explorar exemplos práticos avançados.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo