개발자가 템플릿의 엘리먼트에 직접 접근해야하는 경우가 있을 수 있다.

ref로 접근하기

<script setup>
import { ref, onMounted } from 'vue'

// 엘리먼트 참조를 위해 ref를 선언하십시오.
// 이름은 템플릿 ref 값과 일치해야 합니다.
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

v-for 내부에서 ref 사용하기

ref가 v-for 내부에서 사용되면, 해당 ref는 마운트 후 엘리먼트로 채워지므로 배열 값이어야 한다.

<script setup>
<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

import { ref, onMounted } from 'vue'

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

list에 있는 값을 v-for로 template에 표현해주고, 해당 값을 itemRefs라는데에 배열로 가져와서 표현한다.

함수로 참조하기

ref 문자 대신 바로 함수로 참조도 가능하다.

<input :ref="(el) => { /* el을 속성이나 ref에 할당 */ }">

컴포넌트에 ref 사용하기

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child = ref(null)

onMounted(() => {
  // child.value는 <Child />의 인스턴스를 가집니다.
})
</script>

<template>
  <Child ref="child" />
</template>

컴포넌트 또한 동일하게 ref를 사용할 수 있다.