快捷導航

vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程

更新時間：2023年02月27日 11:45:21 作者：初映CY的前說

自定義指令是對普通DOM元素進行的底層操作,它是一種有效的的補充和擴展,不僅可以用于定義任何的dom操作,并且是可以復用的,下面這篇文章主要給大家介紹了關(guān)于vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程的相關(guān)資料,需要的朋友可以參考下

前言

我們在使用vue框架的時候，指令基本能夠覆蓋我們平常的工作。可難免我們根據(jù)業(yè)務(wù)需求走總有的指令無法一步到達我們想要的結(jié)果。這個時候我們就可以自己動手手動封裝來制作一個指令用于完成我們的設(shè)計。

一、directive自定義指令介紹

1.概念：

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

2.作用：

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

3.使用：

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

二、全局注冊使用流程

1.準備好我們需要的自定義指令

創(chuàng)建一個單獨的文件夾來存儲我們的自定義指令

比如博主的路徑：src/dynamic/index.js

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

我們查看我們的dom與options打印出來的是什么

可以得知：dom是當前的標簽，我們的options為我們自定義指令的屬性方法等

2.開始在main中導入該文件完成注冊功能

main.js中完成導入

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

控制臺查看我們導入的directives是什么，發(fā)現(xiàn)是一個對象

3.完成了注冊功能開始使用

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

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

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

注意點：

導入時候 * 是通配符表示全部 as為取別名
使用方法為v-focus,切記加上v-進行使用
Object.keys()獲取的是對象的鍵產(chǎn)生的數(shù)據(jù)用數(shù)組包裹起來，forEach()用于遍歷數(shù)組
值的傳遞使用value可以獲取

總結(jié)

到此這篇關(guān)于vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程的文章就介紹到這了,更多相關(guān)vue2 directive自定義指令封裝與全局注冊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: