$refs Template Reference Collection
Last updated: 2026-10-22
$refs Template Reference Collection
$refs holds the elements or component instances marked with ref attributes, giving script access to the DOM or child APIs.
| Group | Options: Composition & Misc |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
mounted() {
this.$refs.input.focus()
}
}⚙️ Arguments
| value | No arguments; read the property keyed by template ref names |
|---|
Returns：Element or component instance (null before mount; arrays in v-for)
▶ Example
Edit the code below and see the live result:
Output：
The input is focused on load and refocused by the button.💡 Key Points
⚠️ Warning $refs is not reactive — keep it out of templates and computed.
ℹ️ Note Refs inside v-for produce arrays whose order is not guaranteed.
💡 Tip The Composition API uses ref()/useTemplateRef() instead.
🏷️ Related Composition & Misc
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why undefined before mounted?
A The DOM does not exist yet.
Q Can I reach child data?
A Only what the child exposes.
Q Can it replace events?
A Prefer props/emits; refs coupling is a last resort.
