如何在Vue3中自定义指令？

本文共计2775个文字，预计阅读时间需要12分钟。

目录

1.成果展示

2.指令基础

2.1 两种作用域 2.2 七个锤子函数 2.3 四个参数 2.4 动态参数

3.自定义权限指令

TienChin 项目前端是 Vue3，前端有如下需求： 有一些前端页面上的按钮需要自定义权限控制。

目录

• 1. 成果展示
• 2. 指令基础
• 2.1 两种作用域
• 2.2 七个钩子函数
• 2.3 四个参数
• 2.4 动态参数
• 3. 自定义权限指令

TienChin 项目前端是 Vue3，前端有这样的一个需求：有一些前端页面上的按钮要根据用户的权限来决定是否展示出来，如果用户具备相应的权限，那么就展示对应的按钮；如果用户不具备对应的权限，那么按钮就隐藏起来。大致上就这样一个需求。

看到这个需求，可能有小伙伴首先想到用 v-if 指令，这个指令确实也能做，但是，由于用户具备的权限一般来说可能是多个，甚至可能还有通配符，所以这个比对并不是一个容易的事情，肯定得写方法。。。所以，如果能用一个指令来实现这个功能，那么就会显得专业很多了。

说干就干，我们来看看 Vue3 中如何自定义指令。