$refs テンプレート参照コレクション
最終更新：2026-10-22
$refs テンプレート参照コレクション
$refs は ref 属性を付けた要素やコンポーネントインスタンスを保持し、スクリプトから DOM や子の API へアクセスできるようにします。
| グループ | オプション: 合成とその他 |
|---|---|
| 種類 | オプション |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
export default {
mounted() {
this.$refs.input.focus()
}
}⚙️ 引数
| value | 引数なし。テンプレートの ref 名を鍵としてプロパティを読み取ります |
|---|
戻り値：要素またはコンポーネントインスタンス（マウント前は null。v-for 内では配列）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The input is focused on load and refocused by the button.💡 ポイント
⚠️ 注意 $refs はリアクティブではありません。テンプレートや computed に入れないでください。
ℹ️ 補足 v-for 内の ref は配列になりますが、順序は保証されません。
💡 ヒント Composition API では代わりに ref()/useTemplateRef() を使います。
🏷️ 関連合成とその他
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q mounted 前に undefined になるのはなぜですか？
A DOM がまだ存在しないためです。
Q 子のデータへアクセスできますか？
A 子が公開している部分だけです。
Q イベントの代わりに使えますか？
A props/emits を優先してください。ref による結合は最終手段です。
