Vue.jsの$ref解説: コード例付きで学ぶ要素参照のテクニック

Vue.js では $ref は、DOM 要素や子コンポーネントへの参照を保持するための重要な機能です。これを使うことで、テンプレート内の特定の要素やコンポーネントに簡単にアクセスでき、JavaScript から直接操作が可能になります。

基本的な使い方

1. テンプレート内での設定
   ref 属性を DOM 要素またはコンポーネントに追加して、その要素を識別します。
2. スクリプト内でのアクセス
   コンポーネントのインスタンスから $refs を介して参照にアクセスします。

コード例

ここでは、Vue.js 3 を使用した基本的な例を示します。この例では、テキスト入力とボタンを使用して、ボタンがクリックされたときに入力フィールドの内容をアラートで表示します。

<template>
  <div>
    <input ref="myInput" type="text" placeholder="Enter something">
    <button @click="showInput">Show Input</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const myInput = ref(null);

function showInput() {
  alert(myInput.value.value);  // myInput.value が DOM 要素への参照
}
</script>

解説

• <input ref="myInput" ...>: ref 属性を使用して入力要素に名前をつけ、これをスクリプトから参照できるようにします。
• const myInput = ref(null);: ref 関数を使用して、参照を格納するためのリアクティブな変数 myInput を作成します。
• showInput 関数: この関数は、ボタンがクリックされたときに呼び出され、myInput.value.value を使用して入力要素の現在の値にアクセスし、それをアラートで表示します。

このように $ref は、Vue.js での UI 操作やコンポーネント間の動的なインタラクションを実現するための非常に便利なツールです。