useAttrs() Obter atributos transmitidos (fallthrough)
Última atualização: 2026-10-22
useAttrs() Obter atributos transmitidos (fallthrough)
useAttrs() devolve os atributos transmitidos não declarados em props/emits (class, id, listeners de eventos etc.), usados para distribuição manual.
| Grupo | Template e Auxiliares |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
const attrs = useAttrs()
// template: <div v-bind="attrs"></div>Retorno：Objeto reativo (não reage a mudanças posteriores, mas pode ler os valores mais recentes)
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The button carries both classes and the data attribute.💡 Pontos-chave
ℹ️ Nota Sem props declaradas, os atributos transmitidos caem automaticamente no elemento raiz; só use este hook quando precisar que caiam em elementos internos não raiz.
⚠️ Aviso Não tente alterar attrs: ele é somente leitura; alterações emitem aviso e não têm efeito.
💡 Dica Use junto com inheritAttrs: false: desative a transmissão automática e distribua manualmente com precisão.
🏷️ Template e Auxiliares relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença de $attrs?
R É a versão em Composition API, funcionalmente igual; $attrs é a forma no template/instância.
P attrs atualiza junto com o componente pai?
R Sincroniza os valores mais recentes, mas o objeto em si não é profundamente reativo (os valores internos não disparam rastreamento de dependências).
P Quando a distribuição manual é obrigatória?
R Quando o componente tem múltiplos elementos raiz, ou quando os atributos precisam ir a um elemento interno específico.
