Vue3 は label 要素を取得します

Vue2 では、要素に ref 属性を 与えてthis.$refs.xx アクセスすることで要素を取得しますが、これは Vue3 では適用されなくなりました。

Vue3 で要素を取得する方法を見てみましょう。

<template>
  <div>
    <div ref="el">div元素</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
  setup() {
      // 创建一个DOM引用，名称必须与元素的ref属性名相同
      const el = ref(null)

      // 在挂载后才能通过 el 获取到目标元素
      onMounted(() => {
        el.value.innerHTML = '内容被修改'
      })

      // 把创建的引用 return 出去
      return {el}
  }
}
</script>

要素を取得する操作は次のステップに分かれています。

1. まず、 ref ターゲット要素の属性の値を設定します。 el
2. 次に、  関数内で関数を setup 呼び出し 、値は であり、それを変数に割り当てます 。ここで、変数名は要素に設定した  属性名と同じである必要があることに注意してください。refnullelref
3. 参照変数を要素に el 返却（リターン）します。

補足：設定された要素参照変数はコンポーネントのマウント後にのみアクセスできるため、マウント前の要素に対する操作は無効です。