vue中如何自定义指令（手把手教你在 Vue3 中自定义指令）
TienChin 项目前端是 Vue3 ，前端有这样的一个需求：有一些前端页面上的按钮要根据用户的权限来决定是否展示出来 ，如果用户具备相应的权限 ，那么就展示对应的按钮；如果用户不具备对应的权限 ，那么按钮就隐藏起来 。大致上就这样一个需求 。
看到这个需求 ，可能有小伙伴首先想到用 v-if 指令 ，这个指令确实也能做 ，但是 ，由于用户具备的权限一般来说可能是多个 ，甚至可能还有通配符 ，所以这个比对并不是一个容易的事情 ，肯定得写方法 。 。 。所以 ，如果能用一个指令来实现这个功能 ，那么就会显得专业很多了 。
说干就干 ，我们来看看 Vue3 中如何自定义指令 。
1. 成果展示
我们先来看看实现自定义指令最终的使用方式：
<button @click="btnClick" v-hasPermission="[user:delete]">删除用户</button>小伙伴们看到 ，这个 v-hasPermission 就是我们的自定义指令 ，如果当前用户具备 user:delete 权限 ，这个按钮就会展示出来 ，如果当前用户不具备这个权限 ，这个按钮就不会展示出来 。
2. 指令基础
先要和小伙伴们说一下 ，Vue2 和 Vue3 在自定义指令上有一些差异 ，并不完全一致 ，下面的介绍主要是针对 Vue3 的介绍 。
我先来和小伙伴们分享一下我们具体是怎么做的 ，然后在讲解代码的时候再来和大家说说各个参数的含义 。
2.1 两种作用域
自定义指令可以定义全局的 ，也可以定义局部的 。
在正式开搞之前 ，小伙伴们需要先明白 ，自定义指令有两种作用域 ，一种是局部的自定义指令 ，还有一种是全局的自定义指令 。局部的自定义指令就只能在当前 .vue 文件中使用 ，全局的则可以在所有的 .vue 文件中使用 。
2.1.1 局部指令
直接在当前 .vue 文件中定义即可 ，如下：
directives: { focus: { // 指令的定义 mounted(el) { el.focus() } } }不过 ，在 Vue3 中 ，也可以这样写：
<template> <div> <button v-onceClick="10000" @click="btnClick">ClickMe</button> </div> </template> <script> import {ref} from vue; export default { name: "MyVue01", setup() { const a = ref(1); const btnClick = () => { a.value++; } return {a, btnClick} }, directives: { onceClick: { mounted(el, binding, vnode) { el.addEventListener(click, () => { if (!el.disabled) { el.disabled = true; setTimeout(() => { el.disabled = false; }, binding.value || 1000); } }); } } } } </script>这里我自定义了一个名叫 onceClick 的指令 ，给一个 button 按钮加上这个指令之后 ，可以设置这个 button 按钮在点击多久之后 ，处于禁用状态 ，防止用户重复点击 。
小伙伴们看 ，这个指令的执行逻辑其实很简单 ，el 相当于添加了这个指令的元素 ，监听该元素的点击事件 ，如果点击该元素时 ，该元素不是处于禁用状态 ，那么就设置该元素为禁用 ，给一个定时任务 ，到期后使该元素变为可用 。这里边具体的参数 ，松哥下面会跟大家详细介绍 。
不过这只是一个局部指令 ，只能在当前 .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 以及这里的参数都是咋回事 ，那么接下来松哥就来和大家详细介绍一下这些方法和参数 。
2.2 七个钩子函数
在 Vue3 中 ，自定义指令的钩子函数主要有如下七种（这块跟 Vue2 差异较大）：
created：在绑定元素的 attribute 或事件监听器被应用之前调用 。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时 ，这很有用 。
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用 。
mounted：在绑定元素的父组件被挂载后调用 ，大部分自定义指令都写在这里 。
beforeUpdate：在更新包含组件的 VNode 之前调用 。
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用 。
beforeUnmount：在卸载绑定元素的父组件之前调用
unmounted：当指令与元素解除绑定且父组件已卸载时 ，只调用一次 。
虽然钩子函数比较多 ，看着有点唬人 ，不过我们日常开发中用的最多的其实是 mounted 函数 。
2.3 四个参数
这里七个钩子函数 ，钩子函数中有回调参数 ，回调参数有四个 ，含义基本上和 Vue2 一致：
el：指令所绑定的元素 ，可以用来直接操作 DOM ，我们松哥说想实现一个可以自动判断组件显示还是隐藏的指令 ，那么就可以通过 el 对象来操作 DOM 节点 ，进而实现组件的隐藏 。
binding：我们通过自定义指令传递的各种参数 ，主要存在于这个对象中 ，该对象属性较多 ，如下属性是我们日常开发使用较多的几个：
name：指令名 ，不包括 v- 前缀 。
value：指令的绑定值 ，例如：v-hasPermission="[user:delete]" 中 ，绑定值为 user:delete ，不过需要小伙伴们注意的是 ，这个绑定值可以是数组也可以是普通对象 ，关键是看你具体绑定的是什么 ，在 2.1 小节的案例中 ，我们的 value 就是一个数字 。
expression：字符串形式的指令表达式 。例如 v-my-directive="1 + 1" 中 ，表达式为 "1 + 1" 。
arg：传给指令的参数 ，可选 。例如 v-hasPermission:[name]="zhangsan" 中 ，参数为 "name" 。
vnode：Vue 编译生成的虚拟节点 。
oldVnode：上一个虚拟节点 ，仅在 update 和 componentUpdated 钩子中可用 。
除了 el 之外 ，其它参数都应该是只读的 ，切勿进行修改 。如果需要在钩子之间共享数据 ，建议通过元素的 dataset 来进行 。
2.4 动态参数
有一种动态参数 ，这里也和小伙伴们分享下 。正常情况下 ，我们自定义指令时传递的参数都是通过 binding.value 来获取到的 ，不过在这之外还有一种方式就是通过 binding.arg 获取参数 。
我举一个简单例子 ，假设我们上面这个 onceClick 指令 ，默认的时间单位时毫秒 ，假设现在想给时间设置单位 ，那么我们就可以这样写：
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 的值 ，这样就可以知道时间单位了 ，在使用该指令的时候 ，方式如下：
<button v-onceClick:[timeUnit]="10" @click="btnClick">ClickMe</button> <script> import {ref} from vue; export default { name: "MyVue01", setup() { const timeUnit = ref(s); return {timeUnit} } } </script>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 表示当前用户所具备的权限 ，正常该数据应该是从服务端加载而来 ，但是我这里简单起见 ，就直接定义好了 。
具体的逻辑很简单 ，先从 binding 中提取出 value 的值 ，这就是当前控件所需要的权限 ，然后遍历 usersPermissions 用一个 some 函数 ，去查看 usersPermissions 中是否有满足条件的值 ，如果没有 ，说明当前用户不具备展示该组件所需要的权限 ，那么就要隐藏这个组件 ，隐藏的方式就是获取到当前组件的父组件 ，然后从父组件中移除当前组件即可 。
这是一个全局的指令 ，定义好之后 ，我们就可以在组件中直接使用了：
<button @click="btnClick" v-hasPermission="[user:delete]">删除用户</button>好啦 ，Vue3 自定义组件学会了没？
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！