vue3.0自定義指令

在大多數(shù)情況下，你都可以操作數(shù)據(jù)來修改視圖，或者反之。但是還是避免不了偶爾要操作原生 DOM，這時(shí)候，你就能用到自定義指令。

舉個(gè)例子，你想讓頁面的文本框自動(dòng)聚焦，在沒有學(xué)習(xí)自定義指令的時(shí)候，我們可能會(huì)這么做。

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

在mounted鉤子函數(shù)里，通過 $refs 獲取需要聚焦的 DOM 元素，然后調(diào)用 focus 方法完成自動(dòng)聚焦的功能。

基本使用

上面做法已經(jīng)實(shí)現(xiàn)了我們需要的功能，但是假如說我們有多個(gè)組件都需要這個(gè)功能，那我們只能把這段代碼復(fù)制過去，重新實(shí)現(xiàn)邏輯。我們下面看下如果使用自定義指令，應(yīng)該怎么做。

const app = vue.createApp({  // 通過 v-[自定義指令名稱] 綁定自定義指令  template: ``,});// 注冊(cè)一個(gè)全局自定義指令app.directive('focus',{  // 當(dāng)被綁定的元素插入到DOM的時(shí)候執(zhí)行..  mounted(el){    el.focus();  }})

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

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

我們?cè)谏厦娑x指令的時(shí)候，會(huì)發(fā)現(xiàn)其中包含了 mounted 鉤子函數(shù)，指令還提供了如下鉤子函數(shù)，我們用代碼的形式來給大家列出來。

app.directive('directiveName', {  // 指令綁定元素掛載前  beforeMount(el) {},  // 指令綁定元素掛載后  mounted(el, binding) {},  // 指令綁定元素因?yàn)閿?shù)據(jù)修改觸發(fā)修改前  beforeUpdate(el) {},  // 指令綁定元素因?yàn)閿?shù)據(jù)修改觸發(fā)修改后  updated(el) {},  // 指令綁定元素銷毀前  beforeUnmount(el) {},  // 指令綁定元素銷毀后  unmounted(el) {},});

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

動(dòng)態(tài)指令參數(shù)

下面，我們?cè)賮砜匆粋€(gè)例子。

const app = Vue.createApp({  template: `
`,});// 在很多時(shí)候，你可能想在 mounted 和 updated 時(shí)觸發(fā)相同行為，而不關(guān)心其它的鉤子，就這樣寫app.directive('absTop', (el) => {  el.style[binding.arg] = '100px';});

我們?cè)?div 元素上綁定 absTop 指令，div 元素本身定位是 absolute，指令執(zhí)行讓綁定元素的 top 為 100px。

這時(shí)候，我想在綁定指令的時(shí)候能夠傳一個(gè)參數(shù)，使得元素的 top 值可以根據(jù)參數(shù)來改變。

代碼如下：

const app = Vue.createApp({  data() { return { num: 100 } },  template: `
`,});app.directive('absTop', (el, binding) => {  el.style.top = binding.value + 'px';});

元素可以通過 v-directive="value"?傳入動(dòng)態(tài)參數(shù)，指令通過鉤子函數(shù)的第二個(gè)參數(shù) binding.value 來接收參數(shù)。

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

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

然后修改指令本身

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

在 v-mydirective:[argument]="value"?，arguments 也是可以動(dòng)態(tài)改變的，這樣，就可以完美的實(shí)現(xiàn)上述要求了。

組件的使用

組件中綁定指令與 DOM元素綁定指令并沒有什么不同，指令會(huì)獲取組件的原生?根DOM 來操作。但是要注意的是，在 vue3.0 中，組件可能有多個(gè)根節(jié)點(diǎn)，指令綁定在多根節(jié)點(diǎn)組件是有問題的。

局部自定義指令

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

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

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

總結(jié)

自定義指令可以提取出原生DOM操作的邏輯。所以指令的應(yīng)用范圍主要表現(xiàn)在，當(dāng)一些操作涉及到 DOM 底層時(shí)，而且操作邏輯可能用于多處地方，就適合用指令來封裝這些邏輯。