摘要

模板引用 (Template Refs) 讓我們可以直接存取模板中的 DOM 元素或子元件實例，以便在 <script> 中進行命令式的操作。

定義與說明

實現模板引用需要兩步：在 <script setup> 中，宣告一個名稱與 ref 屬性值相同的、初始值為 null 的 ref 物件。在模板中，為目標元素或元件添加一個 ref 屬性。當元件掛載後，Vue 會自動將該 DOM 元素或元件實例賦值給對應的 ref 物件。

實作範例

模板引用示例

<script setup>
import { ref, onMounted } from 'vue';

// 1. 宣告一個 ref，名稱與模板中的 ref 屬性相同
const inputElement = ref(null);

// 必須在 onMounted 鉤子中才能確保能存取到 DOM 元素
onMounted(() => {
  // 2. 直接操作 DOM 元素
  inputElement.value.focus();
});
</script>

<template>
  <!-- 3. 在元素上添加 ref 屬性 -->
  <input ref="inputElement" />
</template>

結論

模板引用是 Vue 中進行命令式 DOM 操作的「逃生艙口」。雖然我們應優先使用宣告式的方式，但在需要與第三方函式庫整合或處理焦點等特殊情況時，模板引用是不可或缺的工具。

模板引用 ref DOM