Conteúdo alternativo de slots e verificação de slots
Conteúdo do slot padrão, uso de useSlots() para verificar se um slot foi fornecido e renderização condicional.
Conteúdo alternativo de slots e verificação de slots é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 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.
Conteúdo substituto de espaços
Um <slot> pode conter uma marcação padrão. Se o componente pai fornecer conteúdo para esse espaço, o conteúdo do pai terá prioridade; caso contrário, o conteúdo substituto dentro do espaço será renderizado.
Definindo um conteúdo substituto
Coloque o conteúdo padrão entre as tags do espaço. Esse é um padrão adequado para espaços opcionais.
<!-- Button.vue -->
<button>
<slot>Submit</slot>
</button>Conteúdo substituto em ação
Se o componente pai não passar nada, "Enviar" será exibido. Se o componente pai passar conteúdo, ele substituirá o conteúdo alternativo.
<Button /> <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->Conteúdos substitutos para espaços nomeados
Espaços nomeados também aceitam conteúdos substitutos. Um espaço de cabeçalho pode usar como padrão um título comum quando o componente pai não o fornecer.
<header>
<slot name="header">
<h2>Default Title</h2>
</slot>
</header>O problema dos contêineres vazios
Às vezes, você quer renderizar um elemento contêiner, como um contêiner de rodapé, somente quando o componente pai realmente fornece conteúdo para o espaço. Para isso, é preciso verificar se existe um espaço.
A função useSlots
Em <script setup>, useSlots() retorna um objeto cujas chaves são os nomes dos espaços fornecidos. Cada valor é uma função que retorna os nós virtuais do espaço.
import { useSlots } from "vue";
const slots = useSlots();Verificando se um espaço foi fornecido
Chame a função do espaço e verifique se há conteúdo verdadeiro. slots.header existe somente se o componente pai forneceu esse espaço; chamar slots.header?.() retorna com segurança os nós virtuais correspondentes.
const hasHeader = computed(() => !!slots.header);Renderizando o contêiner condicionalmente
Use essa verificação com v-if para que o elemento contêiner apareça somente quando houver conteúdo, evitando nós DOM vazios.
<header v-if="slots.header">
<slot name="header" />
</header>Por que usar o encadeamento opcional
slots.header?.() impede que o espaço indefinido cause problemas. Sem o encadeamento opcional, chamar um espaço indefinido gera um erro. Esse padrão é comum em funções de renderização e verificações computadas.
const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }$slots no modelo
Os modelos expõem os mesmos dados por meio de $slots. Você pode verificar $slots.footer diretamente em um v-if sem importar useSlots.
<footer v-if="$slots.footer">
<slot name="footer" />
</footer>Reunindo tudo
Um componente de cartão robusto renderiza cada seção somente quando o espaço correspondente é fornecido, mantendo a marcação organizada e os estilos previsíveis.
<div class="card">
<header v-if="$slots.header"><slot name="header" /></header>
<div class="body"><slot /></div>
<footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>Verificação rápida
Como verificar se o componente pai forneceu um espaço de "cabeçalho" em script setup?
Recapitulação
Você aprendeu que os espaços podem conter conteúdo substituto, que é renderizado quando o componente pai não fornece o espaço. Para renderizar contêineres condicionalmente, verifique a presença do espaço com useSlots() (slots.header?.()) em script setup ou com $slots.header nos modelos.
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 “Conteúdo alternativo de slots e verificação de slots” é grátis?
Sim — o texto completo de “Conteúdo alternativo de slots e verificação de slots” é 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 “Conteúdo alternativo de slots e verificação de slots”?
Conteúdo do slot padrão, uso de useSlots() para verificar se um slot foi fornecido e renderização condicional. 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 4 de 4.
Quanto tempo leva a aula “Conteúdo alternativo de slots e verificação de slots”?
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