Template ref cho phép bạn lấy một tham chiếu trực tiếp đến một phần tử DOM thật (hoặc một instance của component con) khi bạn cần làm gì đó theo cách mệnh lệnh mà mô hình khai báo của Vue không bao quát — như focus một input, đo một phần tử, hoặc gọi một method của con.
Truy cập một phần tử DOM
vue
<script setup>
import { ref, onMounted } from "vue";
const inputEl = ref(null); // 1. tạo một ref (ban đầu null)
onMounted(() => {
inputEl.value.focus(); // 3. sau khi mount, .value là phần tử DOM
});
</script>
<template>
<input ref="inputEl" /> <!-- 2. tên thuộc tính ref khớp với biến -->
</template>
Mẫu này: khai báo một , gắn nó qua trên phần tử, và sau khi mount, là node DOM thật. Nó là trước khi mount, nên hãy truy cập nó trong (hoặc sau đó), không phải trong lúc setup.