vue中的自定义指令_vue自定义指令中可以调用函数吗-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62198921/article/details/122923874

本文介绍了如何在Vue中创建全局和局部自定义指令，包括Vue.directive的使用方法，以及自定义指令的钩子函数如bind、inserted等在不同阶段的作用。实例演示了如何为文本输入框添加自动获取焦点的功能。

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

vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。自定义指令又分为全局的自定义指令和局部自定义指令。
全局自定义指令
全局注册主要是在main.js里面通过Vue.directive方法进行注册
Vue.directive(‘第一个参数是一个对象，这个对象上有钩子函数’)

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
  }
})
使用：
<input type="text" v-focus />

局部自定义指令

局部注册通过在组件选项对象设置directives属性

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    }
  }
}
使用：
<input type="text" v-focus />