??前言

vue自定義指令(2.x丨3.x)可以幫助我們實現(xiàn)需要操作，比如防抖、節(jié)流、懶加載、輸入框自動聚焦等等，使用起來非常方便，比如vue自帶的v-text、v-html、v-show、v-if等等。

??一、自定義指令分類

• 局部自定義指令：只在組件內(nèi)有效
• 全局自定義指令：所有組件都有效

??二、Vue2.x自定義指令鉤子函數(shù)

• bind：只會調(diào)用一次，指令 第一次 綁定到元素時會調(diào)用
• inserted：被綁定元素插入父節(jié)點時調(diào)用 。
• update：元素第一次綁定不會觸發(fā)，綁定的值發(fā)生更新觸發(fā)，可能發(fā)生在其子節(jié)點更新之前。
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
• unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。

（1）bind與update區(qū)別

相同點：

• dom插入都會調(diào)用，bind在inserted之前

異同點：

• bind 時父節(jié)點為 null
• inserted 時父節(jié)點存在
• bind是在dom樹繪制前調(diào)用，inserted在dom樹繪制后調(diào)用

（2）update與componentUpdated區(qū)別

• 組件更新都會調(diào)用，update在componentUpdated之前
• update 組件更新前的狀態(tài)，componentUpdated 組件更新后的狀態(tài)

Vue.directive('focus', {
  inserted: function (el) {
    console.log(el.parentNode, 'inserted')
    el.focus();
  },
  bind: function (el) {
    console.log(el.parentNode, 'bind')
    el.focus();
  },
});

輸出結(jié)果如下，說明執(zhí)行bind時，還沒父節(jié)點；執(zhí)行inserted時，已有父節(jié)點。

（3）鉤子函數(shù)的參數(shù)（摘自官網(wǎng)）

• el：指令所綁定的元素，可以用來直接操作 DOM。
• binding：一個對象，包含以下 property：
• name：指令名，不包括 v- 前綴。
• value：指令的綁定值，例如：v-my-directive=“1 + 1” 中，綁定值為 2。
• oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
• expression：字符串形式的指令表達式。例如 v-my-directive=“1 + 1” 中，表達式為 “1 + 1”。
• arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 “foo”。
• modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。
• oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。

 <p v-style:[direction]="connect">Enter connection information to connect</p>

    directives: {
        style: {
            bind(el,binding) {
              console.log(binding,'binding')
                el.style.fontSize = "30px";
                el.style.color = "blue";
            },
        },
    },

（4）局部自定義指令

在組件A.vue，用自定義指令實現(xiàn)改變文字顏色

<p v-style>文字描述</p>

 directives: {
    style: {
      bind(el,binding) {
        el.style.fontSize = "30px";
         el.style.color = "blue";
      },
      update(el,binding){
      el.style.fontSize = "30px";
      el.style.color = "blue";
      }
    },
  },

• style：指令的名稱，使用的時候要加前面加個v-
• bind：只會調(diào)用一次，指令 第一次 綁定到元素時會調(diào)用
• el：是指綁定的這個dom元素本身
• binding：獲取綁定指令的信息（name：指令名稱；rawName：指令全稱：value：指定綁定的值）
• update：元素第一次綁定不會觸發(fā)，綁定的值發(fā)生更新觸發(fā)，參數(shù)與binding是相同的，如果邏輯與bind相同的話可以直接把指令當(dāng)成函數(shù)寫，上面的指令是對象類型。
• v-style：使用指令改變了元素的樣式

（5）全局自定義指令

使用Vue.directive(‘指令名稱’,{鉤子函數(shù)})

• 第一個參數(shù)為字符串，指令的名稱
• 第二個參數(shù)是一個對象，用于接收指令的參數(shù)值

Vue.directive('style',{
    bind(el) {
      el.style.fontSize = "30px";
      el.style.color = "blue";
    },
  },
)

（6）簡寫形式

如果update邏輯與bind相同的話可以直接把指令當(dāng)成函數(shù)寫

Vue.directive('style',{
    bind(el) {
      el.style.fontSize = "30px";
      el.style.color = "blue";
    },
  },
)

?? 三、Vue3.x自定義指令鉤子函數(shù)

（1）指令鉤子函數(shù)（摘自官網(wǎng)）

const myDirective = {
  // 在綁定元素的 attribute 前
  // 或事件監(jiān)聽器應(yīng)用前調(diào)用
  created(el, binding, vnode, prevVnode) {
    // 下面會介紹各個參數(shù)的細(xì)節(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) {}
}

（2）鉤子函數(shù)參數(shù)

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

• el：指令綁定到的元素。這可以用于直接操作 DOM。
• binding：一個對象，包含以下屬性。
• value：傳遞給指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
• oldValue：之前的值，僅在 beforeUpdate 和 updated 中可用。無論值是否更改，它都可用。
• arg：傳遞給指令的參數(shù) (如果有的話)。例如在 v-my-directive:foo 中，參數(shù)是 “foo”。
• modifiers：一個包含修飾符的對象 (如果有的話)。例如在 v-my-directive.foo.bar 中，修飾符對象是 { foo: true, bar: true }。
• instance：使用該指令的組件實例。
• dir：指令的定義對象。
• vnode：代表綁定元素的底層 VNode。
• prevNode：之前的渲染中代表指令所綁定元素的 VNode。僅在 beforeUpdate 和 updated 鉤子中可用。

（3）局部注冊兩種方式

<script lang="ts" setup>
// 局部指令, 變量名為駝峰命名(vFocus = v-focus)
const vFocus = {
  mounted: (el:any) => {
    el.focus()
    console.log(el, '已經(jīng)自動獲得焦點')
  }
}
</script>

<script lang="ts">
const vFocus = {
    focus:  {
        mounted(el:any){
            el.focus();
            console.log(el, "已經(jīng)自動獲得焦點");
        }
    },
};
export default {
    setup() { },
    directives: vFocus,
};
</script>

（4）全局注冊

組件A.vue

  <input type="text" v-focus>

在directives文件夾新建focus.ts文件

const directives: any = {
	mounted(el: any) {
		el.focus();
		el.value = '1'
	}
}
export default {
	name: "focus",
	directives
}

在directives文件夾新建index.js

import type { App } from 'vue'
import focus from './focus'
export default function installDirective(app: App) {
    app.directive(focus.name, focus.directives);
} 

main.ts文件

import directives from './directives'
const app = createApp(App);
app.use(directives);

（5）簡化形式

當(dāng)update和mounted中的函數(shù)體一樣時，則可以簡寫成如下：

const directives = (el:any) => {
		el.focus();
		el.value = '1';
}
export default {
	name: "focus",
	directives
}

到此這篇關(guān)于vue2.x與vue3.x中自定義指令詳解的文章就介紹到這了,更多相關(guān)vue2.x與vue3.x自定義指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論