$refs Coleção de referências de template
Última atualização: 2026-10-22
$refs Coleção de referências de template
$refs guarda os elementos ou instâncias de componentes marcados com atributos ref, dando ao script acesso ao DOM ou às APIs dos filhos.
| Grupo | Opções: Composição e Diversos |
|---|---|
| Tipo | Opção |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
export default {
mounted() {
this.$refs.input.focus()
}
}⚙️ Argumentos
| value | Sem argumentos; leia a propriedade chaveada pelos nomes das template refs |
|---|
Retorno：Elemento ou instância de componente (null antes de montar; arrays em v-for)
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The input is focused on load and refocused by the button.💡 Pontos-chave
⚠️ Aviso $refs não é reativo — mantenha-o fora de templates e computed.
ℹ️ Nota Refs dentro de v-for produzem arrays cuja ordem não é garantida.
💡 Dica A Composition API usa ref()/useTemplateRef() em vez disso.
🏷️ Composição e Diversos relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Por que undefined antes do mounted?
R O DOM ainda não existe.
P Posso acessar dados do filho?
R Apenas o que o filho expõe.
P Dá para substituir eventos?
R Prefira props/emits; acoplamento por refs é o último recurso.
