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.
