vue2如何實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)

本文小編為大家詳細(xì)介紹“vue2如何實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue2如何實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

一、directive自定義指令介紹

1.概念：

除了 Vue 內(nèi)置的一系列指令 (比如v-model或者v-show等眾多指令 之外，Vue 還允許你注冊(cè)自定義的指令 (Custom Directives)

2.作用：

豐富我們指令的功能，使我們組件具有原生指令不具備的功能作用

3.使用：

使用Vue.directive('自定義指令名'，{對(duì)象中寫方法})，隨后v-自定義指令名使用（見下）

二、全局注冊(cè)使用流程

1.準(zhǔn)備好我們需要的自定義指令

創(chuàng)建一個(gè)單獨(dú)的文件夾來(lái)存儲(chǔ)我們的自定義指令

export const focus = {
  inserted: function(dom, options) {
    console.log(dom, 'dom')// dom相當(dāng)于$refs
    console.log(options, 'options')// 相當(dāng)于該屬性，我們的值可以從這獲取
    dom.focus()
  }
}

我們查看我們的dom與options打印出來(lái)的是什么

 可以得知：dom是當(dāng)前的標(biāo)簽，我們的options為我們自定義指令的屬性方法等

2.開始在main中導(dǎo)入該文件完成注冊(cè)功能

 main.js中完成導(dǎo)入

// 使用循環(huán)注冊(cè)的方式
import * as directives from '@/directives'
// 開始遍歷注冊(cè)
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})
console.log(Object.keys(directives), 'Object.keys(directives)')
console.log(directives, 'directives')// 這玩意是一個(gè)對(duì)象

控制臺(tái)查看我們導(dǎo)入的directives是什么，發(fā)現(xiàn)是一個(gè)對(duì)象

3.完成了注冊(cè)功能開始使用

  自定義指令<input v-focus="'看看我傳遞的位置是傳遞到哪里去了'" type="text">

 可以看到我們傳遞給組件的值用 =" (數(shù)據(jù))" 進(jìn)行傳遞，我們通過(guò)打印options.value可以獲取我們傳遞進(jìn)來(lái)的數(shù)據(jù)

效果查看：當(dāng)我們刷新頁(yè)面后進(jìn)入直接是觸發(fā)了focus()方法

注意點(diǎn)：

• 導(dǎo)入時(shí)候 * 是通配符表示全部 as為取別名

• 使用方法為v-focus,切記加上v-進(jìn)行使用

• Object.keys()獲取的是對(duì)象的鍵產(chǎn)生的數(shù)據(jù)用數(shù)組包裹起來(lái)，forEach()用于遍歷數(shù)組

• 值的傳遞使用value可以獲取

讀到這里，這篇“vue2如何實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。