[[Vue]]で[[Composition API]]を使ったときに[[Template refs]]を利用する方法。
```html
<template>
<div ref="root">This is a root element</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
// templateのrefとrefを代入する変数名を同一にする
const root = ref(null)
onMounted(() => {
// <div>This is a root element</div> が取得できる
console.log(root.value)
})
return {
root
}
}
}
</script>
```
`v-for`とあわせて使う場合。
https://v3.vuejs.org/guide/composition-api-template-refs.html#usage-inside-v-for
```html
<template>
<div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
{{ item }}
</div>
</template>
<script>
import { ref, reactive, onBeforeUpdate } from 'vue'
export default {
setup() {
const list = reactive([1, 2, 3])
// refの配列divsを容易し、v-forが指定されたElementで関数を指定する
const divs = ref([])
onBeforeUpdate(() => {
divs.value = []
})
return {
list,
divs
}
}
}
</script>
```