・useTemplateRefの使い方は？
こんな疑問にお答えします。
useTemplateRefとはテンプレート内のDOMを直接取得したり操作できる機能のこと。
簡単に操作することができるのでかなり便利。
今回は自分用のメモとしてuseTemplateRefについてまとめてみました！
参考にどうぞ
ということで、この記事では「useTemplateRefの使い方」について解説していきます！
・Vue.jsのuseTemplateRefの使い方
【最新】Vue.jsの入門にオススメの本【３選】 
【最新】Vue.jsの入門にオススメのUdemy教材【３選】 目次
【解説】Vue.jsのuseTemplateRefの使い方【DOMを直接操作】
そんな「useTemplateRef」を使った例となるコードがこちら↓
<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue';
const usetItem = useTemplateRef('test-item');
onMounted(() => {
usetItem.value.focus();
})
</script>
<template>
<input ref="test-item" type="text">
</template>DOM要素の「input」タグを取得して、マウント後にフォーカスを当てることができます。
コードの中で重要な点がこちら↓
①：タグにref属性をつける
②：「useTemplateRef」をインポートして使用
③：その返り値にDOM要素が入る
④：マウント後に使用
⑤：DOM要素を操作してみる
順に解説してきます。
まずテンプレート内の操作したいDOM要素のタグに対して、「ref」属性をつけます。
<template>
<input ref="test-item" type="text">
</template>その中に任意の名前をつけましょう。
今回は例として「test-item」をつけました。
続いて「useTemplateRef」をインポートします。
<script setup lang="ts">
import { useTemplateRef } from 'vue';
</script>
<template>
<input ref="test-item" type="text">
</template>
そしたら「useTemplateRef」関数を使い、その引数の中にref属性に入れた文字列を入れましょう。
その返り値の中に、DOM要素が入ります。
<script setup lang="ts">
import { useTemplateRef } from 'vue';
const usetItem = useTemplateRef('test-item');
</script>
<template>
<input ref="test-item" type="text">
</template>
ちなみにrefオブジェクトのような感じなので、script内で使うときは「.value」を用います。
usetItem.value
【解説】Vue.jsの「ref」と「reactive」の使い方【リアクティブ】 とはいってもDOM要素が入るのはマウント後なため、そのまま使ってもnullになってしまいます。
<script setup lang="ts">
import { useTemplateRef } from 'vue';
const usetItem = useTemplateRef('test-item');
// nullが入る
console.log(usetItem.value);
</script>そのため例として「onMounted」を使い、マウント後に使用するとそのDOMを取得することができます。
<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue';
const usetItem = useTemplateRef('test-item');
// <input type="text">が出力
onMounted(() => {
console.log(usetItem.value);
})
</script>
【解説】Vue.jsのライフサイクルフックの使い方【Compsition API】 最後にDOMを操作してみます。
例として下記のようにすると、マウント後に指定したDOM要素にフォーカスされるようになります。
onMounted(() => {
usetItem.value.focus();
})こんな感じで「useTemplateRef」を使えば、DOM要素を操作したりができちゃいます。
ちなみに「usetItem.value」は nullの可能性があるため下記のように「?.」にしておくのが良いかと。
onMounted(() => {
usetItem.value?.focus();
})
【解説】JavaScriptのオプショナルチェーンの使い方 またuseTemplateRefのTypeScriptの書き方も下記で解説しているので、参考にどうぞ↓
【解説】Vue.js＋TypeScriptでよく使う型定義【まとめてみた】 【解説】Vue.jsのuseTemplateRefの使い方【DOMを直接操作】：まとめ
- タグにref属性をつける
- 「useTemplateRef」をインポートして使用
- その返り値にDOM要素が入る
- マウント後に使用
useTemplateRefを使う時はためしてみてね！
【最新】Vue.jsの入門にオススメの本【３選】 【最新】Vue.jsの入門にオススメのUdemy教材【３選】
