template refs ให้การเข้าถึงองค์ประกอบ DOM หรือคอมโพเนนต์ลูกอย่างไร?

Template refs ให้อ้างอิงโดยตรงไปยังองค์ประกอบ DOM จริง (หรืออินสแตนซ์คอมโพเนนต์ลูก) เมื่อคุณต้องทำอย่างไรบางอย่างแบบสั่งเหน่อ ซึ่งโมเดลเชิงประกาศของ Vue ไม่ครอบคลุม — เช่นโฟกัสการป้อนข้อมูล การวัดองค์ประกอบ หรือเรียกเมธอดของลูก

การเข้าถึงองค์ประกอบ DOM

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

รูปแบบ: ประกาศ แนบมันผ่าน บนองค์ประกอบ และหลังจากการติดตั้ง คือโหนด DOM จริง มันเป็น ก่อนการติดตั้ง ดังนั้นให้เข้าถึงมันใน (หรือภายหลัง) ไม่ใช่ระหว่าง setup