vue自定义指令及应用场景

Posted 2021-02-21 jervy

当你第一次接触vue的时候，一定会使用到其中的几个指令，比如：v-if、v-for、v-bind...这些都是vue为我们写好的，用起来相当的爽。如果有些场景不满足，需要我们自己去自定义，那要怎么办呢？下面来一步步学习如何自定义一个属于我们自己的指令。

vue自定义指令的基础知识

钩子函数

在消息处理机制中必不可少的一组CP，即回调和钩子。

钩子的概念源于Windows的消息处理机制，通过设置钩子，应用程序可e799bee5baa6e79fa5e98193e78988e69d8331333365656563以对所有的消息事件进行拦截，然后执行钩子函数，对消息进行想要的处理方式。

接下来是一段js代码，主要用于给btn设置点击的钩子函数

let btn = document.getElementById("btn");

btn.onclick = () => {    console.log("i‘m a hook");

}

钩子是在捕获消息的时候立即执行钩子函数。

下面是一段给btn添加click的监听器。

btn.addEventListener("click",() =>{    console.log(this.onclick);//undefined});

这是给btn绑定了一个监听器，后面那个函数是它的回调函数，因为消息捕获的过程我们并不能参与，而在捕获执行完毕的时候，回调函数才会执行，我们可以把对消息的处理写在回调函数里。

回调函数和钩子函数的区别 根本上，他们都是为了捕获消息而生的，但是钩子函数在捕获消息的第一时间就会执行，而回调函数是在整个捕获过程结束时，最后一个被执行的。

---

 

钩子函数 和 回调函数 一般都可用来处理事件“回调”。

回调函数是你留个处理方法给事件，事件发生了以后会自动执行你留下调处理方法；

钩子函数是好比找了个代理，监视事件是否发生，如果发生了这个代理就执行你的事件处理方法；在这个过程中，代理就是钩子函数；

在某种意义上，回调函数做的处理过程跟钩子函数中要调用调方法一样

但是有一点需要明确： 钩子函数一般是又事件发生者提供的。直白了说，它留下一个钩子，这个钩子的作用就是钩住你的回调方法。

在vue中：

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

钩子函数参数

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 `2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

vue自定义指令的使用场景

按钮级别权限控制

权限控制分为页面级别和按钮级别，这两种思路基本是一致的。

• 页面级别：用户登录后，获取用户role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。最后通过router.addRoutes动态挂载。现在是通过获取到用户的role之后，在前端用v-if手动判断来区分不同权限对应的按钮的。。

• 按钮级别：用户登录后，获取用户role，在前端用 v-if 或者封装一个自定义指令，手动判断来区分不同权限对应的按钮的。

参考：https://www.cnblogs.com/chenwenhao/p/11924161.html、