Vue3での特定要素にアクセスする方法

今回はjsでよく使う特定の要素に何かしたい時などに使うやつ・・・。

javascriptだと

document.getElementByID('');

jQueryだと

$("#id")

Vueでは今までのIDやclassでの取得ではなく「ref」を使って取得する。

実装

1.アクセスさせたい要素にref属性をつける

<p ref="hi">こんばんわ</p>

2.scriptに同じ変数名で初期化したrefをつくる

const hi = ref();

3.onMountedでcommponentsが表示された時の設定をする

onMounted(function(){
console.log(hi.value)
);

完成系

<template>
	<p ref="hi">こんばんわ</p>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
const hi = ref();

onMounted(function(){
	console.log(hi.value);
);
</script>

ちなみに文章だけ取りたい場合はvalue.innerHTMLをつけるだけ。
上のやつだとhi.value.innerHTMLとなる。
*文を取りたい時は多分v-modelやv-bindでバインディングした方が良いとは思う。

---

感想

正直、タグ内にrefで名前をつけた物がscriptで変数名を同じにしないといけない理由はよく分からない。
でも同じにしないと判断してくれない模様。。。
逆に言えば、よくそんなconstで付けた変数名を自動的に紐付けしてくれるなぁと感心する。