目錄

• 一、註冊自定義指令
• 1.1、全域性自定義指令
• 1.2、區域性自定義指令
• 二、自定義指令中的生命週期鉤子函式
• 三、自定義指令鉤子函式的引數
• 四、自定義指令引數

一、註冊自定義指令

以下例項都是實現一個輸入框自動獲取焦點的自定義指令。

1.1、全域性自定義指令

在2中，全域性自定義指令通過 directive 掛載到 Vue 物件上，使用 Vue.directive('name',opt)。

例項1：Vue2 全域性自定義指令

Vue.directive('focus',{

 inserted:(el)=>{

  el.focus()

 }

})

inserted 是鉤子函式，在繫結元素插入父節點時執行。

在 vue3 中，vue 例項通過createApp 建立，所以全域性自定義指令的掛載方式也改變了， directive 被掛載到 app上。

例項2：Vue3 全域性自定義指令

//全域性自定義指令

app.directive('focus',{

 mounted(el){

  el.focus()

 }

})

//元件使用

<input type="text" v-focus />



 

1.2、區域性自定義指令

在元件內部，使用 directives 引入的叫做區域性自定義指令。Vue2 和 Vue3 的自定義指令引入是一模一樣的。

例項3：區域性自定義指令

<script>

//區域性自定義指令

const defineDir = {

 focus:{

  mounted(el){

   el.focus()

  }

 }

}

export default {

 directives:defineDir,setup(){}

}

</script>

　　

二、自定義指令中的生命週期鉤子函式

一個指令定義物件可以提供如下幾個鉤子函式（都是可選的，根據需要引入）

• created ：繫結元素屬性或事件監聽器被應用之前呼叫。該指令需要附加需要在普通的 v-on 事件監聽器前呼叫的事件監聽器時，這很有用。
• beforeMounted ：當指令第一次繫結到元素並且在掛載父元件之前執行。
• mounted ：繫結元素的父元件被掛載之後呼叫。
• beforeUpdate ：在更新包含元件的 VNode 之前呼叫。
• updated ：在包含元件的 VNode 及其子元件的 VNode 更新後呼叫。
• beforeUnmounted ：在解除安裝繫結元素的父元件之前呼叫
• unmounted ：當指令與元素解除繫結且父元件已解除安裝時，只調用一次。

例項3：測試指令內生命週期函式執行

<template>

 <div>

  <input type="text" v-focus  v-if="show"><br>

  <button @click="changStatus">{{show?'隱藏':'顯示'}}</button>

 </div>

</template>

 

//區域性自定義指令

const autoFocus = {

 focus:{

  created(){

   console.log('created');

  },beforeMount(){

   console.log('beforeMount');

  },mounted(el){

   console.log('mounted');

  },beforeUpdated(){

   console.log('beforeUpdated')

  },updated(){

   console.log('updated');

  },beforeUnmount(){

   console.log('beforeUnmount');

  },unmounted(){

   console.log('unmounted');

  }

 },}

import { ref } from 'vue'

export default {

 directives:autoFocus,setup(){

  const show = ref(true)

  return {

   show,changStatus(){

    show.value = !show.value

   }

  }

 }

}

　　

通過點選按鈕，我們發現建立 input 元素的時候，會觸發 created、beforeMount 和 mounted 三個鉤子函式。

隱藏 input 元素的時候，會觸發 beforeUnmount 和 unmounted 。

然而我們新增的 beforeUpdate 和 updated 函式並沒有執行。

此時我們把 input 元素上的 v-if 修改成 v-show 就會執行上述兩個方法了，具體的執行情況自行驗證下。

從 www.cppcns.comvue2 升級到 vue3 ，自定義指令的生命週期鉤子函式發生了改變，具體變化如下：

• bind 函式被替換成了beforeMounted。
• update 被移除。
• componentUpdated 被替換成了updated。
• unbind 被替換成了 unmounted。
• inserted 被移除。

三、自定義指令鉤子函式的引數

鉤子函式被賦予了以下引數：

• el：指令所繫結的元素，可以直接操作DOM。
• binding：是一個物件，包含該指令的所有資訊。

binding 包含的屬性具體的分別為：

• arg 自定義指令的引數名。
• value 自定義指令繫結的值。
• oldValue 指令繫結的前一個值。
• dir 被執行的鉤子函式
• modifiers：一個包含修飾符的物件。

<template>

 <div>http://www.cppcns.com;

  <div v-fixed >定位</div>

 </div>

</template>

 

<script>

//自定義指令動態引數

const autoFocus = {

 fixed:{

  beforeMount(el,binding){

   console.log('el',el)

   console.log('binding',binding)

  }

 }

}

export default {

 directives:autoFocus,www.cppcns.com

 setup(){

 }

}

</script>

四、自定義指令引數

自定義指令的也可以帶引數，引數可以是動態的，引數可以根據元件例項資料進行實時更新。

例項4：自定義指令動態引數

<template>

 <div>

  <div v-fixed:pos="posData" style="width:100px;height:100px;background:grhttp://www.cppcns.comey">定位</div>

 </div>

</template>

<script>

//自定義指令動態引數

const autoFocus = {

 fixed:{

  beforeMount(el,binding){

   el.style.position = "fixed"

   el.style.left = binding.value.left+'px'

   el.style.top = binding.value.top + 'px'

  }

 }

}

export default {

 directives:autoFocus,setup(){

  const posData = {

   left:20,top:200

  }

  return {

   posData,}

 }

}

</script>

什麼時候需要自定義指令？

• 需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。
• 需要將某些功能在指定DOM元素上使用，但對於需要操作大量DOM元素或者大變動時候，推薦使用元件，而不是指令。

到此這篇關於 vue3 自定義指令詳情的文章就介紹到這了,更多相關 vue3 自定義指令內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！