Miten template ref:it antavat sinulle pääsyn DOM-elementteihin tai alikomponentteihin?

Template ref:it antavat sinulle suoran viitteen todelliseen DOM-elementtiin (tai alikomponentin instanssiin) silloin, kun sinun täytyy tehdä jotain imperatiiivista, jota Vue:n deklaratiivinen malli ei kata — kuten input:in fokussaaminen, elementin mittaaminen tai lapsen metodin kutsuminen.

DOM-elementin käyttö

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

Malli: ilmoita , liitä se elementin -attribuutin kautta ja mounting:in jälkeen on todellinen DOM-solmu. Se on ennen mountingia, joten käytä sitä -koukussa (tai myöhemmin), ei setup-funktiossa.