詳解vue如何使用自定義指令

更新時間：2023年10月09日 16:33:19 作者：想干到35歲的程序猿

在Vue的模板語法中,我們學了很多指令,當然除了這些指令,Vue也允許我們自己定義自己的指令,所以本文就來和大家聊聊如何使用自定義指令吧

自定義指令到底是什么

首先一定要明白，自定義指令其實就是一個對象！只是該對象中包含了類似組件生命周期鉤子的函數(shù)而已，如created，mounted，該鉤子函數(shù)會收到當前DOM元素作為參數(shù)，從而可以使用該DOM元素進行操作。

<template>
 <input id="IamInput" v-focus />
</template>
<script setup>
const vFocus = {
  mounted: (el:any) => {
    console.log('el是啥子哦',el);   
    el.focus()
    }
}
//當然也可以不寫成箭頭函數(shù)
const vFocus = {
  mounted: function (el: any) {
    console.log('el是啥子哦', el);
    el.focus();
  },
};
</script>

當然上面只是局部注冊，我們一般用的是全局注冊，即在main.ts中進行注冊：

const vFocus = {
  mounted: function (el: any) {
    console.log('el是啥子哦', el);
    el.focus();
  },
};
app.directive('focus',vFocus)

自定義指令中的鉤子函數(shù)

自定義指令中提供了許多鉤子函數(shù)，我們可以在不同的鉤子函數(shù)中調(diào)用不同的參數(shù)

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

為了容易理解，我們直接用一個案例來學習自定義指令即可。

案例

<template>
    <input id="IamInput" v-focus="num" />
    <el-button @click="num++">點擊使得num++</el-button>
</template>
<script lang="ts" setup>
const num=ref(1)
const vFocus = {
  mounted(el: any,binding:any, vnode:any, prevVnode:any) {
    el.value=binding.value //el是DOM元素，el.value就是input框的值，我們在元素掛載時設置一個默認值為1
 },
 updated (el: any,binding:any, vnode:any, prevVnode:any) {
// 我們在元素更新時設置乘以2倍的操作
console.log('binding',binding);
el.value=binding.value//更新input框的內(nèi)容
 },
};
 //在main.ts中全局掛載
 app.directive('focus',vFocus)
 </script>

該案例非常簡單，大家應該一看就明白，首先定義一個input框，然后定義自定義指令，在DOM元素掛載時把binding.value（如官網(wǎng)所說，binging中的value參數(shù)就是傳遞給DOM元素的值，在這里就是num）賦值給el.value，el.value是什么？當然就是輸入框的內(nèi)容啦，所有一上來，輸入框中的值就是num的值，即1（注：其實這里一上來是2，因為DOM掛載時mounted和update鉤子都會觸發(fā)，會把值*2）
當點擊按鈕時，num會+1，由于num變化了，v-focus這個指令中的binging.value也發(fā)生了變化，因此會觸發(fā)自定義指令中的update鉤子，此時我們對其做乘以2的操作，并賦值給輸入框

掛載時