Kaip šablonų nuorodos suteikia prieigą prie DOM elementų ar antrinių komponentų?

Šablonų nuorodos leidžia jums gauti tiesioginę nuorodą į tikrą DOM elementą (arba antrinį komponentą) kai reikia atlikti ką nors imperatyvaus, ką Vue deklaratyvus modelis neapima — tokį kaip input fokusuoti, elemento matavimą ar vaiko metodo iškviečia.

Prieiga prie DOM elemento

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

Šablonas: deklaruokite , prisiekite jį per ant elemento, o po mount, yra tikras DOM mazgas. Jis yra prieš mounting, todėl pasiekite jį (ar vėliau), o ne setup metu.