快捷導(dǎo)航

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

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

在Vue的模板語(yǔ)法中,我們學(xué)了很多指令,當(dāng)然除了這些指令,Vue也允許我們自己定義自己的指令,所以本文就來(lái)和大家聊聊如何使用自定義指令吧

自定義指令到底是什么

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

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

當(dāng)然上面只是局部注冊(cè)，我們一般用的是全局注冊(cè)，即在main.ts中進(jìn)行注冊(cè)：

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)聽(tīng)器應(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) {}
}

為了容易理解，我們直接用一個(gè)案例來(lái)學(xué)習(xí)自定義指令即可。

案例

<template>
    <input id="IamInput" v-focus="num" />
    <el-button @click="num++">點(diǎn)擊使得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框的值，我們?cè)谠貟燧d時(shí)設(shè)置一個(gè)默認(rèn)值為1
 },
 updated (el: any,binding:any, vnode:any, prevVnode:any) {
// 我們?cè)谠馗聲r(shí)設(shè)置乘以2倍的操作
console.log('binding',binding);
el.value=binding.value//更新input框的內(nèi)容
 },
};
 //在main.ts中全局掛載
 app.directive('focus',vFocus)
 </script>

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

掛載時(shí)