Vue中自定義指令的三個(gè)常用方法小結(jié)

更新時(shí)間：2024年02月25日 09:48:15 作者：跟Bug雙向奔赴

這篇文章主要為大家詳細(xì)介紹了Vue中自定義指令的三個(gè)常用方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以了解一下

介紹

除了 Vue 內(nèi)置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 還允許你注冊(cè)自定義的指令 (Custom Directives)。

我們已經(jīng)介紹了兩種在 Vue 中重用代碼的方式：組件和組合式函數(shù)。組件是主要的構(gòu)建模塊，而組合式函數(shù)則側(cè)重于有狀態(tài)的邏輯。另一方面，自定義指令主要是為了重用涉及普通元素的底層 DOM 訪問的邏輯。

一個(gè)自定義指令由一個(gè)包含類似組件生命周期鉤子的對(duì)象來定義。鉤子函數(shù)會(huì)接收到指令所綁定元素作為其參數(shù)。下面是一個(gè)自定義指令的例子，當(dāng)一個(gè) input 元素被 Vue 插入到 DOM 中后，它會(huì)被自動(dòng)聚焦：

<script setup>
// 在模板中啟用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>
 
<template>
  <input v-focus />
</template>

假設(shè)你還未點(diǎn)擊頁面中的其他地方，那么上面這個(gè) input 元素應(yīng)該會(huì)被自動(dòng)聚焦。該指令比 autofocus attribute 更有用，因?yàn)樗粌H僅可以在頁面加載完成后生效，還可以在 Vue 動(dòng)態(tài)插入元素后生效。

在 <script setup> 中，任何以 v 開頭的駝峰式命名的變量都可以被用作一個(gè)自定義指令。在上面的例子中，vFocus 即可以在模板中以 v-focus 的形式使用。

在沒有使用 <script setup> 的情況下，自定義指令需要通過 directives 選項(xiàng)注冊(cè)：

export default {
  setup() {
    /*...*/
  },
  directives: {
    // 在模板中啟用 v-focus
    focus: {
      /* ... */
    }
  }
}

將一個(gè)自定義指令全局注冊(cè)到應(yīng)用層級(jí)也是一種常見的做法：

const app = createApp({})
 
// 使 v-focus 在所有組件中都可用
app.directive('focus', {
  /* ... */
})

創(chuàng)建方法

min.js注冊(cè)

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.directive("focus", {
  // 在綁定元素的 attribute 前
  // 或事件監(jiān)聽器應(yīng)用前調(diào)用
  created(el, binding, vnode, prevVnode) {
  },
  // 在元素被插入到 DOM 前調(diào)用
  beforeMount() {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點(diǎn)都掛載完成后調(diào)用
  mounted() {},
  // 綁定元素的父組件更新前調(diào)用
  beforeUpdate() {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點(diǎn)都更新后調(diào)用
  updated() {},
  // 綁定元素的父組件卸載前調(diào)用
  beforeUnmount() {},
  // 綁定元素的父組件卸載后調(diào)用
  unmounted() {},
});
app.mount("#app");

script setup中使用

<script setup lang="ts">
// 在模板中啟用 v-focus
const vFocus = {
  // 在綁定元素的 attribute 前
  // 或事件監(jiān)聽器應(yīng)用前調(diào)用
  created(el, binding, vnode, prevVnode) {},
  // 在元素被插入到 DOM 前調(diào)用
  beforeMount() {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點(diǎn)都掛載完成后調(diào)用
  mounted() {},
  // 綁定元素的父組件更新前調(diào)用
  beforeUpdate() {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點(diǎn)都更新后調(diào)用
  updated() {},
  // 綁定元素的父組件卸載前調(diào)用
  beforeUnmount() {},
  // 綁定元素的父組件卸載后調(diào)用
  unmounted() {},
};
</script>

script中使用

export default {
  setup() {
    /*...*/
  },
  directives: {
    // 在模板中啟用 v-focus
    focus: {
      // 在綁定元素的 attribute 前
      // 或事件監(jiān)聽器應(yīng)用前調(diào)用
      created(el, binding, vnode, prevVnode) {},
      // 在元素被插入到 DOM 前調(diào)用
      beforeMount() {},
      // 在綁定元素的父組件
      // 及他自己的所有子節(jié)點(diǎn)都掛載完成后調(diào)用
      mounted() {},
      // 綁定元素的父組件更新前調(diào)用
      beforeUpdate() {},
      // 在綁定元素的父組件
      // 及他自己的所有子節(jié)點(diǎn)都更新后調(diào)用
      updated() {},
      // 綁定元素的父組件卸載前調(diào)用
      beforeUnmount() {},
      // 綁定元素的父組件卸載后調(diào)用
      unmounted() {},
    }
  }
}

指令鉤子

一個(gè)指令的定義對(duì)象可以提供幾種鉤子函數(shù) (都是可選的)：

const myDirective = {
  // 在綁定元素的 attribute 前
  // 或事件監(jiān)聽器應(yīng)用前調(diào)用
  created(el, binding, vnode, prevVnode) {
    // 下面會(huì)介紹各個(gè)參數(shù)的細(xì)節(jié)
  },
  // 在元素被插入到 DOM 前調(diào)用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點(diǎn)都掛載完成后調(diào)用
  mounted(el, binding, vnode, prevVnode) {},
  // 綁定元素的父組件更新前調(diào)用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點(diǎn)都更新后調(diào)用
  updated(el, binding, vnode, prevVnode) {},
  // 綁定元素的父組件卸載前調(diào)用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 綁定元素的父組件卸載后調(diào)用
  unmounted(el, binding, vnode, prevVnode) {}
}

鉤子參數(shù)

指令的鉤子會(huì)傳遞以下幾種參數(shù)：

el：指令綁定到的元素。這可以用于直接操作 DOM。

binding：一個(gè)對(duì)象，包含以下屬性。

value：傳遞給指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
oldValue：之前的值，僅在 beforeUpdate 和 updated 中可用。無論值是否更改，它都可用。
arg：傳遞給指令的參數(shù) (如果有的話)。例如在 v-my-directive:foo 中，參數(shù)是 "foo"。
modifiers：一個(gè)包含修飾符的對(duì)象 (如果有的話)。例如在 v-my-directive.foo.bar 中，修飾符對(duì)象是 { foo: true, bar: true }。
instance：使用該指令的組件實(shí)例。
dir：指令的定義對(duì)象。

vnode：代表綁定元素的底層 VNode。

prevNode：代表之前的渲染中指令所綁定元素的 VNode。僅在 beforeUpdate 和 updated 鉤子中可用。

舉例來說，像下面這樣使用指令：

<div v-example:foo.bar="baz">

binding 參數(shù)會(huì)是一個(gè)這樣的對(duì)象：

{
  arg: 'foo',
  modifiers: { bar: true },
  value: /* `baz` 的值 */,
  oldValue: /* 上一次更新時(shí) `baz` 的值 */
}

和內(nèi)置指令類似，自定義指令的參數(shù)也可以是動(dòng)態(tài)的。舉例來說：

<div v-example:[arg]="value"></div>

這里指令的參數(shù)會(huì)基于組件的 arg 數(shù)據(jù)屬性響應(yīng)式地更新。

除了 el 外，其他參數(shù)都是只讀的，不要更改它們。若你需要在不同的鉤子間共享信息，推薦通過元素的 dataset attribute 實(shí)現(xiàn)。

簡(jiǎn)化形式

對(duì)于自定義指令來說，一個(gè)很常見的情況是僅僅需要在 mounted 和 updated 上實(shí)現(xiàn)相同的行為，除此之外并不需要其他鉤子。這種情況下我們可以直接用一個(gè)函數(shù)來定義指令，如下所示：

<div v-color="color"></div>

app.directive('color', (el, binding) => {
  // 這會(huì)在 `mounted` 和 `updated` 時(shí)都調(diào)用
  el.style.color = binding.value
})

對(duì)象字面量

如果你的指令需要多個(gè)值，你可以向它傳遞一個(gè) JavaScript 對(duì)象字面量。別忘了，指令也可以接收任何合法的 JavaScript 表達(dá)式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

app.directive('demo', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
})

在組件上使用

當(dāng)在組件上使用自定義指令時(shí)，它會(huì)始終應(yīng)用于組件的根節(jié)點(diǎn)，和透?jìng)?attributes 類似。

<MyComponent v-demo="test" />
<!-- MyComponent 的模板 -->
 
<div> <!-- v-demo 指令會(huì)被應(yīng)用在此處 -->
  <span>My component content</span>
</div>

需要注意的是組件可能含有多個(gè)根節(jié)點(diǎn)。當(dāng)應(yīng)用到一個(gè)多根組件時(shí)，指令將會(huì)被忽略且拋出一個(gè)警告。和 attribute 不同，指令不能通過 v-bind="$attrs" 來傳遞給一個(gè)不同的元素?？偟膩碚f，不推薦在組件上使用自定義指令。

以上就是Vue中自定義指令的三個(gè)常用方法小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue自定義指令的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: