Template refs, DOM öğelerine veya alt bileşenlere nasıl erişim sağlar?

Template refs, Vue'nin deklaratif modeli tarafından kapsanmayan zorunlu bir şeyler yapmmanız gerektiğinde — bir girişi odaklamak, bir öğeyi ölçmek veya bir çocuğun metodunu çağırmak gibi — gerçek bir DOM öğesine (veya bir alt bileşen örneğine) doğrudan referans verir.

Bir DOM öğesine erişim

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

Desen: bildir, aracılığıyla öğeye ekle ve montajdan sonra gerçek DOM düğümüdür. Montajdan önce olur, bu nedenle (veya sonrasında) içinde erişin, setup sırasında değil.