Template refs ਕਿਵੇਂ DOM elements ਜਾਂ child components ਦੀ access ਦਿੰਦੇ ਹਨ?

Template refs ਤੁਹਾਨੂੰ ਅਸਲ DOM element (ਜਾਂ child component instance) ਦਾ ਸਿੱਧਾ reference ਦਿੰਦੇ ਹਨ ਜਦੋਂ ਤੁਹਾਨੂੰ ਕਿਤੇ imperative ਕੰਮ ਕਰਨਾ ਹੋਵੇ ਜੋ Vue ਦੇ declarative model ਨੂੰ ਨਹੀਂ ਮਿਲਦਾ — ਜਿਵੇਂ input ਨੂੰ focus ਕਰਨਾ, element ਨੂੰ measure ਕਰਨਾ, ਜਾਂ child ਦਾ method call ਕਰਨਾ।

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>

Pattern: declare ਕਰੋ, ਇਸਨੂੰ element ਉੱਤੇ ਰਾਹੀਂ attach ਕਰੋ, ਅਤੇ mount ਤੋਂ ਬਾਅਦ ਅਸਲ DOM node ਹੈ। ਇਹ mount ਤੋਂ ਪਹਿਲਾਂ ਹੈ, ਇਸ ਲਈ ਇਸ ਨੂੰ (ਜਾਂ ਬਾਅਦ ਵਿੱਚ) ਵਿੱਚ access ਕਰੋ, setup ਦੌਰਾਨ ਨਹੀਂ।