Hogyan adnak a sablonreferenciák hozzáférést a DOM elemekhez vagy gyermekkomponensekhez?

A sablonreferenciák lehetővé teszik számára, hogy közvetlen hivatkozást szerezzen egy valódi DOM elemre (vagy gyermekkomponens-példányra), amikor valami imperatívat kell tennie, amit a Vue deklaratív modellje nem fed le — például beviteli fókusz, elem mérése vagy egy gyermek metódusának meghívása.

Hozzáférés a DOM elemhez

<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>

A minta: deklaráljon egy értéket, csatlakoztassa az elemhez a segítségével, és a csatlakoztatás után a tényleges DOM csomópont. Csatlakoztatás előtt , így az (vagy később) során érje el, ne a setup alatt.