Vue自定義指令獲取不到參數(shù)的原因及解決
更新時間：2022年08月15日 11:21:48 作者：woshihedayu
這篇文章主要介紹了Vue自定義指令獲取不到參數(shù)的原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
自定義指令獲取不到參數(shù)的原因
最近在學習前端的權限管理，需要根據(jù)用戶的權限對按鈕進行顯示和隱藏，用到了vue中的自定義指令。
首先，在permission.js中定義如下函數(shù)
// 檢查是否有權限點
export function hasPermissionPoint(point) {
? let points = store.getters.roles.points
? if (points) {
? ? return points.some(it => it.toLowerCase() === point.toLowerCase())
? } else {
? ? return false
? }
}用于比對用戶是否擁有按鈕所需要的權限。
在main.js中引入這個函數(shù)
import {hasPermissionPoint} from './utils/permission'并在main.js中添加如下代碼
Vue.directive('perm',{
? inserted(el,binding){
? ? ? console.log(binding)
? ? ? if (!hasPermissionPoint(binding.value)) {
? ? ? ? ? el.parentNode.removeChild(el);
? ? ? }
? }
})用于定義自定義指令。
然后，就可以在頁面中使用這個指令了
<a v-perm="'import'" ? ? class="el-button el-button--primary el-button--mini" ? ? title="導入">導入</a ? ? ? ? ? ? ? ? ? >
需要注意的是，這里的v-perm值需要在雙引號里面再加個單引號，表示字符串。我一開始就是因為沒有加單引號，導致binding.value一直獲取不到值，百度了很久才發(fā)現(xiàn)這個問題，特此說明。
Vue自定義指令總結及案例
自定義指令：自定義一些指令對普通 DOM 元素進行底層操作（可注冊全局指令、局部指令）。
使用：如果想注冊局部指令，組件中也接受一個 directives 的選項
案例一：設置dom字體顏色
一、簡單入門
局部注冊：
<template>
<div>
<div class="study-directive" v-color='fontColor'>自定義指令總結:可以是變量
<!-- <div class="study-directive" v-color='"blue"'>自定義指令總結：可以是字符串 -->
<br />
<div v-colors='fontColors'>注冊多個自定義指令</div>
<button @click="changeColor">改變顏色</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fontColor: "red",
fontColors: "green"
};
},
// 注冊一個局部指令 v-color
directives: {
color: {
//被綁定元素插入父節(jié)點時調用（執(zhí)行一次）
inserted: function(el, bind) {
el.style.color = bind.value;
},
//組件值更新時
update: function(el, bind) {
//當我們觸發(fā) changeColor 修改顏色值時，然而視圖并沒有更新，因為指令也存在生命周期 ，
//所以如果需要視圖更新，使用更新階段
el.style.color = bind.value;
}
},
//存在多個指令時：
colors: {
inserted: function(el, bind) {
el.style.color = bind.value;
},
update: function(el, bind) {
el.style.color = bind.value;
}
}
},
methods: {
changeColor() {
this.fontColor = "green";
}
}
};
</script>
<style scoped>
.study-directive {
margin: 200px 200px 10px;
background: gray;
padding: 40px;
width: 500px;
font-size: 18px;
}
</style>
全局注冊：
//mian.js中
Vue.directive('color', {
inserted: function (el, bind) {
el.style.color = bind.value
}
})全局注冊多個自定義指令：
①：創(chuàng)建directive.js文件，然后編寫全局的自定義組件；
export default (Vue) => {
Vue.directive('color', {
inserted: function (el, bind) {
el.style.color = bind.value
},
update: function (el, bind) {
el.style.color = bind.value;
}
})
Vue.directive('colors', {
inserted: function (el, bind) {
el.style.color = bind.value
}
})
}②：在main.js文件中引入directive.js文件,然后使用Vue.use（directive）調用；
import directive from "@/utils/directives.js"; Vue.use(directive)
③：在需要使用的地方直接使用
<div v-color='"red"'> 哈哈哈哈哈哈哈哈哈</div>
1）鉤子函數(shù)：
一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：
bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行默認值設置。inserted：被綁定元素插入父節(jié)點時調用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。update：所在組件的 VNode 更新時調用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數(shù)參數(shù)見下)。componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。unbind：只調用一次，指令與元素解綁時調用。
2）鉤子函數(shù)參數(shù)：
el：指令所綁定的元素，可以用來直接操作 DOM。binding：一個對象，包含以下 property：
name：指令名，不包括 v- 前綴。
value：指令的綁定值。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。
二、劃水了
1）動態(tài)指令參數(shù)：指令的參數(shù)可以是動態(tài)的
假如我們需要動態(tài)設置元素定位的位置：
<p v-color:[direction]="200">content</p>
data() {
return {
direction: "left",
fontColor: "red"
};
},
directives: {
color: {
//被綁定元素插入父節(jié)點時調用（執(zhí)行一次）
inserted: function(el, bind) {
console.log(bind);
el.style.color = bind.value;
el.style.position = "abosult";
var s = bind.arg == "left" ? "left" : "top";
el.style[s] = bind.value + "px";
}
}
},2）對象字面量
如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數(shù)能夠接受所有合法的 JavaScript 表達式。
<div v-color="{ color: 'white', text: 'hello!' }"></div>directives: {
color: {
inserted: function(el, bind) {
console.log(bind)
}
}
},
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
相信大部分兄弟都體驗過Vite了,都知道它很快,在學習的時候,官網(wǎng)上的各種配置也是看的眼花繚亂,不知道哪些是必要掌握的,下面這篇文章主要給大家介紹了關于Vite常見配置選項的相關資料,需要的朋友可以參考下2024-09-09
vue使用echarts實現(xiàn)中國地圖和點擊省份進行查看功能
這篇文章主要介紹了vue使用echarts實現(xiàn)中國地圖和點擊省份進行查看功能,本文通過實例代碼給大家詳細講解，對vue echarts 中國地圖相關知識感興趣的朋友一起看看吧2022-12-12
Vue.js中一個很重要的知識點是組件通信,不管是業(yè)務類的開發(fā)還是組件庫開發(fā),都有各自的通訊方法,下面這篇文章主要給大家介紹了關于Vue3常用的通訊方式的相關資料,需要的朋友可以參考下2022-05-05
在移動端或PC,頁面的部分內容常常需要我們讓其在頁面滾動,這篇文章主要給大家介紹了關于vue.js滾動條插件vue-scroll的基本用法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
一文詳解Vue3組件通信輕松玩轉復雜數(shù)據(jù)流
在大型Vue項目中,組件通信如同神經(jīng)網(wǎng)絡般貫穿整個應用,這篇文章將為大家詳細介紹一下Vue3中的組件通信方式,有需要的小伙伴可以了解下2025-02-02
隨著前端工程化的應用越來越廣，插件和包的管理也逐漸衍生出很多的管理器，常見的幾種包管理器如：npm、cnpm、yarn、pnpm，那你知道這些管理器之間有哪些區(qū)別嗎？我們一起來逐個認識下它們2023-04-04
這篇文章主要介紹了vue-for循環(huán)嵌套操作,結合實例形式分析了vue.js使用for循環(huán)嵌套讀取數(shù)據(jù)相關操作技巧,需要的朋友可以參考下2019-01-01
文章介紹了使用vue-pdf@4.3.0時遇到的上傳特殊PDF文件無法正常預覽的問題,通過查看控制臺報錯信息,發(fā)現(xiàn)是因為缺少字體導致的,解決方法是修改pdfjs-dist庫的代碼,注釋掉隱藏電子簽章的代碼,為了在生產(chǎn)環(huán)境中應用這個修改,使用了patch-package插件,感興趣的朋友一起看看吧2024-11-11
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應式對象的API,只對對象的第一層屬性進行響應式轉換,不對嵌套對象處理,有助于性能優(yōu)化和狀態(tài)管理,同時也指出了shallowReactive在使用中的注意事項2024-10-10
v-bind和v-model是Vue.js中的兩個常用指令,它們在功能和用途上有一些區(qū)別,接下來小編就給大家具有講講vue中v-bind和v-model區(qū)別,感興趣的同學跟著小編一起來看看吧2023-08-08