Как ссылки на шаблоны предоставляют доступ к элементам DOM или дочерним компонентам?

Ссылки на шаблоны позволяют получить прямую ссылку на реальный элемент DOM (или экземпляр дочернего компонента), когда вам нужно сделать что-то императивное, что не охватывает декларативная модель Vue — например, сфокусировать вход, измерить элемент или вызвать метод дочернего компонента.

Accessing a DOM element

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

const inputEl = ref(null);   // 1. create a ref (initially null)

onMounted(() => {
  inputEl.value.focus();      // 3. after mount, .value is the DOM element
});
</script>

<template>
  <input ref="inputEl" />     <!-- 2. ref attribute name matches the variable -->
</template>

Паттерн: объявите , присоедините его через к элементу и после монтирования — это реальный узел DOM. Он равен до монтирования, поэтому получайте к нему доступ в (или позже), а не во время setup.