つまんねっと

Vue3 コンポ内でエレメント参照したりプライベートな変数に使うref

Vue3を使っているときにコンポーネント内のエレメントを参照したいとき、idをつけてgetElementByIdしたりだと複製したときに参照ができなくなる。そんなときにはrefを使って参照できる。参照したいエレメントにrefという属性で名前をつけ、setup内で同名の変数をref(null)で宣言する。そうすると変数の子のvalueというプロパティから参照できる。
最後にreturnするオブジェクトに含めないといけない。

<template>
  <div ref="hoge"></div>
</template>
<script>
 import {onMounted,ref} from 'vue';
 export default{
  setup(){
    const hoge=ref(null); /* nullを入れる */
    onMounted(()=>{
      alert(hoge.value.nodeName); /*DIVと表示される*/
    });
    return {
      hoge
    }
  }
 }
</script>

refはコンポーネント内のプライベートな変数としても使う。
refの引数には初期値を入れる。setup()内ではプロパティvalueを操作する。template内では変数名のみで参照できる。

<template>
 <template v-if="flag">
  <div>{{hoge}}</div>
 </template>
</template>
<script>
 import {onMounted,ref} from 'vue';
 export default{
  setup(){
    const hoge=ref('');
    const flag=ref(true);
    onMounted(()=>{
     flag.value=true;
     hoge.value='表示したい';
    });
    {
      return {
        hoge,
        flag
      }
    }
  }
}
</script>

とも