Jak odwołania do szablonów zapewniają dostęp do elementów DOM lub komponentów podrzędnych?

Odwołania do szablonów umożliwiają uzyskanie bezpośredniego odniesienia do rzeczywistego elementu DOM (lub instancji komponentu podrzędnego), gdy musisz coś zrobić imperatywnie, czego nie obejmuje model deklaratywny Vue — na przykład skoncentrować dane wejściowe, zmierzyć element lub wywołać metodę dziecka.

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>

Wzór: zdeklaruj , dołącz go przez do elementu, a po montażu jest rzeczywistym węzłem DOM. Przed montażem jest , więc uzyskaj do niego dostęp w (lub później), a nie podczas setup.