v-slot (#) Diretiva de Conteúdo de Slot
Última atualização: 2026-10-22
v-slot (#) Diretiva de Conteúdo de Slot
O v-slot define o conteúdo do slot, abreviado como #: serve para entregar fragmentos de template aos slots nomeados ou com escopo do componente filho.
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<template v-slot:header>...</template>
<template #default="{ item }">...</template>
<Child v-slot="{ data }">⚙️ Argumentos
| expression | Nome do slot (omitido = slot padrão); slots com escopo permitem desestruturar os dados vindos do filho |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The page shows a bold 'Custom header' — parent content replaced the slot default.💡 Pontos-chave
💡 Dica # é o atalho de v-slot: — #header equivale a v-slot:header.
⚠️ Aviso O v-slot funciona apenas em ou em tags de componente, nunca em elementos comuns.
ℹ️ Nota Slots com escopo entregam os dados do filho ao pai (#default="{ item }") — o mecanismo central para renderização de listas personalizadas.
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P # é o mesmo que v-slot:?
R Exatamente equivalente; um v-slot sem argumento representa o slot padrão.
P O que é um slot com escopo?
R O filho passa dados para fora via props do slot (por exemplo, #default="{ item }"), permitindo renderização de listas personalizada.
P O v-slot pode ficar em um elemento comum?
R Não — apenas em <template> ou em tags de componente, a causa mais comum de erros.
