ref Template Reference
Last updated: 2026-10-22
ref Template Reference
The ref attribute names an element or component for script access via $refs or ref()/useTemplateRef().
| Group | Built-ins |
|---|---|
| Kind | Special Attribute |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<input ref="inp">
<child-comp ref="child"></child-comp>⚙️ Arguments
| props | A string name (auto-collected by same-name refs); arrays inside v-for |
|---|
▶ Example
Edit the code below and see the live result:
Output：
The input is focused after mount.💡 Key Points
ℹ️ Note Composition style: declare ref(null) and use the same name, or useTemplateRef in 3.5+.
⚠️ Warning Null before mount — guard access.
💡 Tip Prefer data-driven code; reach for refs only for focus, measurement and library mounting.
🏷️ Related Built-ins
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Does the ref attribute clash with ref()?
A No — the attribute is a marker; ref() is the reactive API.
Q Can several elements be referenced?
A Refs inside v-for produce arrays (order not guaranteed).
Q When should it be avoided?
A Avoid it when state and events express the logic.
