slots Acesso declarativo a slots (3.3+)

Última atualização: 2026-10-22

slots Acesso declarativo a slots (3.3+)

A opção slots declara o acesso a slots como função, produzindo um $slots rastreado — a presença de slots torna-se reativa.

GrupoOpções: Renderização e Ciclo de Vida
TipoOpção
EscopoNo Componente
Versão do Vue3.0+
Suporte a SSRSim

📝 Sintaxe

export default {
  slots: { default: () => [], header: () => [] }
}

⚙️ Argumentos

valueUm objeto cujas chaves são nomes de slots e os valores são funções que retornam o conteúdo

Retorno:Sem retorno — popula o $slots

▶ Exemplo

Edite o código abaixo e veja o resultado ao vivo:

Saída:

Shows the parent's header content.

💡 Pontos-chave

ℹ️ Nota Adicionado no 3.3 para corrigir verificações desatualizadas de presença de slot.
💡 Dica Preferido em bibliotecas de componentes para verificações de presença.
⚠️ Aviso Liste todos os slots — omissões quebram o acesso.
Mais casos em breve.

📚 Tutoriais Relacionados

❓ FAQ

P Diferença em relação a $slots?
R Os mesmos dados, agora com rastreamento de dependências.
P É preciso listar todos os slots?
R Sim — slots não declarados ficam ausentes.
P Relação com useSlots?
R É a contraparte no estilo options de useSlots().
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%