::: info この関数は将来のバージョンで削除されます。

Vue 3.5 では useTemplateRef API が導入され、templateRef の機能を効果的に置き換えることができるため、ネイティブなアプローチを使用することをお勧めします。 :::

templateRef

テンプレート要素に ref をバインドするための省略記法。

使用法

<script lang="ts">
import { templateRef } from '@vueuse/core'

export default {
  setup() {
    const target = templateRef('target')

    // `target` を返す必要はありません。ref に自動的にバインドされます。
  },
}
</script>

<template>
  <div ref="target" />
</template>

JSX/TSX と共に

import { templateRef } from '@vueuse/core'

export default {
  setup() {
    const target = templateRef<HTMLElement | null>('target', null)

    // 文字列 ref を使用
    return () => <div ref="target"></div>
  },
}

<script>

<script> を使用する場合、すべての変数がテンプレートに公開されるため、これを使用する必要はありません。ref と全く同じになります。

<script setup lang="ts">
import { ref } from 'vue'

const target = ref<HTMLElement | null>(null)
</script>

<template>
  <div ref="target" />
</template>