vue进阶：自定义指令directive

最新推荐文章于 2023-07-04 15:30:43 发布

super_wanan

最新推荐文章于 2023-07-04 15:30:43 发布

阅读量452

点赞数

分类专栏： Vue源码解析文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43867717/article/details/122845851

版权

Vue源码解析专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue中的自定义指令，包括如何创建输入框自动聚焦和权限控制的示例，以及探讨了钩子函数及其参数，动态指令参数的使用，并强调了何时适合使用自定义指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义指令

vue提供了很多内置的指令，比如v-if ，v-show，v-model等等，通常情况下，我们是没有必要去自定义指令的，代码复用和抽象的主要形式是组件。但是呢，有的情况下，我们需要对普通的DOM进行底层操作，这个时候就需要用到自定义指令。

两个常见的示例

1.输入框自动聚焦

原生的input组件有autofocus这个属性可以让输入框自动聚焦，但是这个属性有兼容性问题（autofocus 在移动版 Safari 上不工作），一个理想的方案就是使用自定义指令去直接触达该input元素，令其聚焦。

这里采用全局注册的方式：

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

使用的时候：

<input type="text" v-focus>

这样input框就自动聚焦了：
在这里插入图片描述

2.权限控制

权限控制也是管理后台常常需要考虑的功能之一，权限控制的本质是校验有无权限，有权限就显示，无权限不显示。因为可以考虑用自定义指令来做。
介于上面使用了全局注册的方式，这里演示就用局部注册了，但是实际项目中使用绝大多数的自定义指令都是采用全局注册的方式。

export default {
  name: 'Derective',
  data () {
    return {}
  },
  directives: {
    permission: {
      inserted: function (el, binding) {
        console.log(binding)
        // 如果不是管理员角色，则移除该元素
        if (binding.value !== 'admin') {
          el.parentNode.removeChild(el)
        }
      }
    }
  }
}
</script>

先来看下钩子函数中的第二个参数binding打印出来哪些内容：
在这里插入图片描述

<button v-permission="'admin'">管理员可见</button>

这样就是实现了一个简单的权限控制的自定义指令

钩子函数

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

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

钩子函数参数

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

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：

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 }。