這篇文章主要講解了“Vue3中怎么自定義指令”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue3中怎么自定義指令”吧！

創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為德安企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設，德安網(wǎng)站改版等技術服務。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

TienChin 項目前端是 Vue3，前端有這樣的一個需求：有一些前端頁面上的按鈕要根據(jù)用戶的權限來決定是否展示出來，如果用戶具備相應的權限，那么就展示對應的按鈕；如果用戶不具備對應的權限，那么按鈕就隱藏起來。大致上就這樣一個需求。

看到這個需求，可能有小伙伴首先想到用 v-if 指令，這個指令確實也能做，但是，由于用戶具備的權限一般來說可能是多個，甚至可能還有通配符，所以這個比對并不是一個容易的事情，肯定得寫方法。。。所以，如果能用一個指令來實現(xiàn)這個功能，那么就會顯得專業(yè)很多了。

1. 成果展示

我們先來看看實現(xiàn)自定義指令最終的使用方式：

刪除用戶

小伙伴們看到，這個 v-hasPermission 就是我們的自定義指令，如果當前用戶具備 user:delete 權限，這個按鈕就會展示出來，如果當前用戶不具備這個權限，這個按鈕就不會展示出來。

2. 指令基礎

先要和小伙伴們說一下，Vue2 和 Vue3 在自定義指令上有一些差異，并不完全一致，下面的介紹主要是針對 Vue3 的介紹。

我先來和小伙伴們分享一下我們具體是怎么做的，然后在講解代碼的時候再來和大家說說各個參數(shù)的含義。

2.1 兩種作用域

自定義指令可以定義全局的，也可以定義局部的。

在正式開搞之前，小伙伴們需要先明白，自定義指令有兩種作用域，一種是局部的自定義指令，還有一種是全局的自定義指令。局部的自定義指令就只能在當前 .vue 文件中使用，全局的則可以在所有的 .vue 文件中使用。

2.1.1 局部指令

直接在當前 .vue 文件中定義即可，如下：

directives: {
  focus: {
    // 指令的定義
    mounted(el) {
      el.focus()
    }
  }
}

不過，在 Vue3 中，也可以這樣寫：

這里我自定義了一個名叫 onceClick 的指令，給一個 button 按鈕加上這個指令之后，可以設置這個 button 按鈕在點擊多久之后，處于禁用狀態(tài)，防止用戶重復點擊。

小伙伴們看，這個指令的執(zhí)行邏輯其實很簡單，el 相當于添加了這個指令的元素，監(jiān)聽該元素的點擊事件，如果點擊該元素時，該元素不是處于禁用狀態(tài)，那么就設置該元素為禁用，給一個定時任務，到期后使該元素變?yōu)榭捎?。這里邊具體的參數(shù)，松哥下面會跟大家詳細介紹。

不過這只是一個局部指令，只能在當前 .vue 文件中使用，我們也可以定義全局指令，這樣就可以在所有的 .vue 文件中使用了。

2.1.2 全局指令

全局指令我們一般寫在 main.js 中，或者寫一個單獨的 js 文件然后在 main.js 中引入，下面的例子是直接寫在 main.js 中：

const app = createApp(App);

app.directive('onceClick',{
    mounted(el, binding, vnode) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true;
                setTimeout(() => {
                    el.disabled = false;
                }, binding.value || 1000);
            }
        });
    }
})

這樣，我們就可以隨時隨地去使用 v-onceClick 這個指令了。

可能小伙伴感覺比較疑惑，自定義指令時候的 mounted 以及這里的參數(shù)都是咋回事，那么接下來松哥就來和大家詳細介紹一下這些方法和參數(shù)。

2.2 七個鉤子函數(shù)

在 Vue3 中，自定義指令的鉤子函數(shù)主要有如下七種（這塊跟 Vue2 差異較大）：

• created：在綁定元素的 attribute 或事件監(jiān)聽器被應用之前調(diào)用。在指令需要附加在普通的 v-on 事件監(jiān)聽器調(diào)用前的事件監(jiān)聽器中時，這很有用。

• beforeMount：當指令第一次綁定到元素并且在掛載父組件之前調(diào)用。

• mounted：在綁定元素的父組件被掛載后調(diào)用，大部分自定義指令都寫在這里。

• beforeUpdate：在更新包含組件的 VNode 之前調(diào)用。

• updated：在包含組件的 VNode 及其子組件的 VNode 更新后調(diào)用。

• beforeUnmount：在卸載綁定元素的父組件之前調(diào)用

• unmounted：當指令與元素解除綁定且父組件已卸載時，只調(diào)用一次。

雖然鉤子函數(shù)比較多，看著有點唬人，不過我們?nèi)粘ｉ_發(fā)中用的最多的其實是 mounted 函數(shù)。

2.3 四個參數(shù)

這里七個鉤子函數(shù)，鉤子函數(shù)中有回調(diào)參數(shù)，回調(diào)參數(shù)有四個，含義基本上和 Vue2 一致：

• el：指令所綁定的元素，可以用來直接操作 DOM，我們松哥說想實現(xiàn)一個可以自動判斷組件顯示還是隱藏的指令，那么就可以通過 el 對象來操作 DOM 節(jié)點，進而實現(xiàn)組件的隱藏。

• binding：我們通過自定義指令傳遞的各種參數(shù)，主要存在于這個對象中，該對象屬性較多，如下屬性是我們?nèi)粘ｉ_發(fā)使用較多的幾個：

• name：指令名，不包括 v- 前綴。

• value：指令的綁定值，例如：v-hasPermission="['user:delete']" 中，綁定值為 'user:delete'，不過需要小伙伴們注意的是，這個綁定值可以是數(shù)組也可以是普通對象，關鍵是看你具體綁定的是什么，在 2.1 小節(jié)的案例中，我們的 value 就是一個數(shù)字。

• expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。

• arg：傳給指令的參數(shù)，可選。例如 v-hasPermission:[name]="'zhangsan'" 中，參數(shù)為 "name"。

• vnode：Vue 編譯生成的虛擬節(jié)點。

• oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。

除了 el 之外，其它參數(shù)都應該是只讀的，切勿進行修改。如果需要在鉤子之間共享數(shù)據(jù)，建議通過元素的 dataset 來進行。

2.4 動態(tài)參數(shù)

有一種動態(tài)參數(shù)，這里也和小伙伴們分享下。正常情況下，我們自定義指令時傳遞的參數(shù)都是通過 binding.value 來獲取到的，不過在這之外還有一種方式就是通過 binding.arg 獲取參數(shù)。

我舉一個簡單例子，假設我們上面這個 onceClick 指令，默認的時間單位時毫秒，假設現(xiàn)在想給時間設置單位，那么我們就可以這樣寫：

const app = createApp(App);

app.directive('onceClick',{
    mounted(el, binding, vnode) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true;
                let time = binding.value;
                if (binding.arg == "s") {
                    time = time * 1000;
                }
                setTimeout(() => {
                    el.disabled = false;
                }, time);
            }
        });
    }
})

在自定義指令的時候，獲取到 binding.arg 的值，這樣就可以知道時間單位了，在使用該指令的時候，方式如下：

ClickMe

timeUnit 是一個提前定義好的變量。

3. 自定義權限指令

好啦，有了上面的基礎知識，接下來就來看我們本文的主題，自定義權限指令，我寫一個簡單的例子大家來看下：

const usersPermissions = ['user'];

app.directive('hasPermission', {
    mounted(el, binding, vnode) {
        const {value} = binding;
        let f = usersPermissions.some(p => {
            return p.indexOf(value) !== -1;
        });
        if (!f) {
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
})

usersPermissions 表示當前用戶所具備的權限，正常該數(shù)據(jù)應該是從服務端加載而來，但是我這里簡單起見，就直接定義好了。

具體的邏輯很簡單，先從 binding 中提取出 value 的值，這就是當前控件所需要的權限，然后遍歷 usersPermissions 用一個 some 函數(shù)，去查看 usersPermissions 中是否有滿足條件的值，如果沒有，說明當前用戶不具備展示該組件所需要的權限，那么就要隱藏這個組件，隱藏的方式就是獲取到當前組件的父組件，然后從父組件中移除當前組件即可。

這是一個全局的指令，定義好之后，我們就可以在組件中直接使用了：

刪除用戶

感謝各位的閱讀，以上就是“Vue3中怎么自定義指令”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Vue3中怎么自定義指令這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！