摘要

自訂指令是 Vue 提供的一種機制，讓我們可以封裝需要直接操作 DOM 的底層邏輯，並以 v- 前綴的屬性形式在模板中使用。

定義與說明

當 Vue 內建的指令（如 v-model、v-show）無法滿足我們的需求，特別是需要直接、命令式地操作 DOM 元素時，就可以建立自訂指令。我們可以全域註冊或在元件內局部註冊一個指令。

實作範例

Vue SFC

// 建立一個 v-focus 指令，讓元素在掛載時自動獲得焦點。
<script setup>
// 在 <script setup> 中，任何以 v 開頭的駝峰式變數都可以被用作一個自訂指令
const vFocus = {
  // 當綁定的元素被掛載到 DOM 中時……
  mounted: (el) => {
    // 聚焦元素
    el.focus();
  }
}
</script>

<template>
  <!-- 在模板中使用自訂指令 -->
  <input v-focus />
</template>

結論

自訂指令是進行可複用 DOM 操作的「逃生艙口」。當你需要的功能核心是直接操作 DOM 時，將其封裝為自訂指令是比在元件中手動操作更清晰、更可複用的選擇。

自訂指令 DOM 操作 v-focus