ref Referência de Template
Última atualização: 2026-10-22
ref Referência de Template
O atributo ref dá um nome de referência a um elemento ou componente, acessível no script via $refs ou ref()/useTemplateRef().
| Grupo | Integrados |
|---|---|
| Tipo | Atributo Especial |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<input ref="inp">
<child-comp ref="child"></child-comp>⚙️ Argumentos
| props | Nome em string (na Composition API, a variável de mesmo nome coleta automaticamente); em v-for, vira array |
|---|
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The input is focused after mount.💡 Pontos-chave
ℹ️ Nota Composition API: declare const inp = ref(null) e escreva ref="inp" no template para coleta automática (a partir do 3.5, prefira useTemplateRef).
⚠️ Aviso Antes da montagem o valor é null: verifique antes de acessar ou coloque no onMounted.
💡 Dica Prefira dados e eventos como motor da lógica; manipular o DOM via ref só quando necessário (foco, medições, montagem de bibliotecas de terceiros).
🏷️ Integrados relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P O atributo ref conflita com a ref() reativa?
R Não: o ref do template é uma marcação e ref() é a API de reatividade; na Composition API, o mesmo nome cria a associação automática.
P Dá para referenciar vários elementos?
R Refs dentro do v-for são coletados em array (a ordem não é garantida).
P Quando não usar?
R Se a lógica pode ser expressa com estado e eventos, não use ref; mantenha a abordagem orientada a dados.
