怎么在vue3.0中自定義指令

今天就跟大家聊聊有關怎么在vue3.0中自定義指令，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

舉個例子，你想讓頁面的文本框自動聚焦，在沒有學習自定義指令的時候，我們可能會這么做。

const app = Vue.createApp({
 mounted(){
  this.$refs.input.focus();
 }, 
 template: `<input type="text" ref="input" />`,
});

在mounted鉤子函數里，通過 $refs 獲取需要聚焦的 DOM 元素，然后調用 focus 方法完成自動聚焦的功能。

基本使用

上面做法已經實現了我們需要的功能，但是假如說我們有多個組件都需要這個功能，那我們只能把這段代碼復制過去，重新實現邏輯。我們下面看下如果使用自定義指令，應該怎么做。

const app = Vue.createApp({
 // 通過 v-[自定義指令名稱] 綁定自定義指令
 template: `<input type="text" v-focus/>`,
});
// 注冊一個全局自定義指令
app.directive('focus',{
 // 當被綁定的元素插入到DOM的時候執行..
 mounted(el){
  el.focus();
 }
})

如上，我們定義了一個全局自定義指令 focus，并通過 v-focus 綁定到需要聚焦的 input 元素上。如果，其他組件或模塊也需要聚焦功能，只要簡單的綁定此指令即可。

自定義指令的鉤子函數

我們在上面定義指令的時候，會發現其中包含了 mounted 鉤子函數，指令還提供了如下鉤子函數，我們用代碼的形式來給大家列出來。

app.directive('directiveName', {
 // 指令綁定元素掛載前
 beforeMount(el) {},
 // 指令綁定元素掛載后
 mounted(el, binding) {},
 // 指令綁定元素因為數據修改觸發修改前
 beforeUpdate(el) {},
 // 指令綁定元素因為數據修改觸發修改后
 updated(el) {},
 // 指令綁定元素銷毀前
 beforeUnmount(el) {},
 // 指令綁定元素銷毀后
 unmounted(el) {},
});

效果就不一一列舉了，有興趣大家可以嘗試下分別觸發這些鉤子函數。指令鉤子函數大部分與組件很類似，大家可以對比著來看。

動態指令參數

下面，我們再來看一個例子。

const app = Vue.createApp({
 template: `<div class="box" v-abs-top="num"  ></div>`,
});
// 在很多時候，你可能想在 mounted 和 updated 時觸發相同行為，而不關心其它的鉤子，就這樣寫
app.directive('absTop', (el) => {
 el.style[binding.arg] = '100px';
});

我們在 div 元素上綁定 absTop 指令，div 元素本身定位是 absolute，指令執行讓綁定元素的 top 為 100px。這時候，我想在綁定指令的時候能夠傳一個參數，使得元素的 top 值可以根據參數來改變。代碼如下：

const app = Vue.createApp({
 data() { return { num: 100 } },
 template: `<div class="box" v-abs-top="num"></div>`,
});
app.directive('absTop', (el, binding) => {
 el.style.top = binding.value + 'px';
});

元素可以通過 v-directive="value" 傳入動態參數，指令通過鉤子函數的第二個參數 binding.value 來接收參數。

如果其他元素可能不是修改 top 的值，有可能是 left、right 或者 bottom，那么指令可以動態指定嗎？其實也是可以做到的。首先，我們修改模板為：

<div class="box" v-abs:left="num"></div>

然后修改指令本身

app.directive('absTop', (el, binding) => {
 el.style[binding.arg] = binding.value + 'px';
});

在 v-mydirective:[argument]="value" ，arguments 也是可以動態改變的，這樣，就可以完美的實現上述要求了。

組件的使用

組件中綁定指令與 DOM元素綁定指令并沒有什么不同，指令會獲取組件的原生 根DOM 來操作。但是要注意的是，在 vue3.0 中，組件可能有多個根節點，指令綁定在多根節點組件是有問題的。

局部自定義指令

最后，再來簡單說下局部自定義指令是怎么定義的。

const app = Vue.createApp({
directives: {
  focus: {
   // 指令的定義
   mounted(el) {
    el.focus()
   }
  }
 }
}

局部指令定義和全局指令基本一致，如上所示，在組件中定義 directives 就可以了。

看完上述內容，你們對怎么在vue3.0中自定義指令有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。