「Vue.jsのref属性の完全ガイド：DOM要素とコンポーネントへのアクセスをマスターする」
はじめに
Vue.jsでのアプリケーション開発において、DOM要素やコンポーネントインスタンスへの直接的なアクセスはしばしば必要になります。Vue.js
のref属性は、このようなケースで非常に役立ちます。
この記事では、Vue.jsにおけるref属性の使い方と、その応用例を詳しく解説します。
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
Vue.jsのref属性とは
ref属性は、Vue.jsでDOM要素やコンポーネントインスタンスに名前を付け、それらにプログラムから直接アクセスするための機能です。
これにより、特定のDOM要素を操作したり、子コンポーネントのメソッドを呼び出したりすることが可能になります。
ref属性の基本的な使い方
ref属性を使用するには、テンプレート内の要素またはコンポーネントにrefという属性を追加し、一意の識別子を割り当てます。
その後、Vueインスタンスの$refsオブジェクトを通じて、指定した要素やコンポーネントにアクセスできます。
DOM要素へのrefの適用例
ソースコード例: DOM要素へのrefの使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<pre class="lang:javascript decode:true "> <template> <div> <input ref="inputField" type="text"> <button @click="focusInput">Focus Input</button> </div> </template> <script> export default { methods: { focusInput() { this.$refs.inputField.focus(); } } } |
この例では、テキスト入力フィールドにref="inputField"という属性を割り当てています。そして、ボタンがクリックされたときにfocusInputメソッドが呼び出され、this.$refs.inputField.focus()を通じてプログラム的に入力フィールドにフォーカスを当てています。
出力結果
ボタンをクリックすると、テキスト入力フィールドにフォーカスが当たります。
コンポーネントへのrefの適用
ref属性は、子コンポーネントのインスタンスにアクセスするためにも使用できます。これに
より、親コンポーネントから子コンポーネントのメソッドを呼び出したり、データを操作したりすることが可能になります。
コンポーネントへのrefの使用例
ソースコード例: コンポーネントへのrefの使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<pre class="lang:javascript decode:true "> <template> <div> <child-component ref="childRef"></child-component> <button @click="accessChild">Access Child Component</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { accessChild() { this.$refs.childRef.someMethod(); } } } |
この例では、子コンポーネントにref="childRef"を割り当てています。ボタンがクリックされると、accessChildメソッドが呼び出され、this.$refs.childRef.someMethod()を通じて子コンポーネントのメソッドを実行します。
出力結果
ボタンをクリックすると、子コンポーネントのsomeMethodメソッドが実行されます。
Vue 3でのrefの進化
Vue 3では、Composition APIの導入により、refの使用方法がさらに強化されました。Vue 3では、refは
リアクティブな参照として機能し、テンプレートだけでなくJavaScript内でもよりダイナミックに使用できます。
Vue 3でのrefの使用例
ソースコード例: Vue 3でのrefの使用
|
1 2 3 4 5 6 7 8 9 10 11 |
import { ref } from 'vue'; export default { setup() { const inputRef = ref(null); const focusInput = () => { inputRef.value.focus(); }; return { inputRef, focusInput }; } }; |
この例では、Vue 3のComposition APIを使用して、refを宣言し、テンプレート内のDOM要素にバインドしています。inputRefはリアクティブな参照として機能し、focusInputメソッドを通じて対象のDOM要素にフォーカスを当てることができます。
出力結果
関数を実行すると、指定されたDOM要素にフォーカスが当たります。
まとめ
Vue.jsのref属性は、DOM要素やコンポーネントインスタンスへの直接的なアクセスを可能にする強力な機能です。Vue 2とVue 3の両方で利用でき、特にVue 3ではComposition APIと組み合わせてより柔軟に使用できます。
最後まで読んで頂き、ありがとうございました。Vue.jsのref属性を上手に活用して、よりインタラクティブでダイナミックなウェブアプリケーションを構築してください。
