Vue3 自定义指令

最新推荐文章于 2025-09-15 15:09:24 发布

原创最新推荐文章于 2025-09-15 15:09:24 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue3 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在Vue3中如何创建和注册自定义指令，指出与Vue2的不同之处。在Vue3中，自定义指令的注册机制发生变化，需要将其挂载到根组件，并作为方法返回。文中通过示例详细解释了全局注册和单文件、多文件注册的步骤，使得开发者能够全局使用自定义指令。

在前端项目中，有很多需求是需要在多页面进行逻辑处理，通常我们所需要的功能可以通过DOM操作来实现，或者多处功能一致，我们就可以使用自定义指令。

在vue2中的自定义指令指令注册的方法是

// v-focus.js

import vue from 'vue'

Vue.directive('focus', (el) => {
  el.focus()
})

// main.js
import './utils/v-focus'

但是在vue3中注册机制已经改变，如果你还是沿用原来的注册方法，指令将未被注册并且抛出异常

废话不多说，让我们来看看vue3是怎么自定义指令

首先官方文档已经说明了如何在setup中以及非setup使用方法

// setup
const vFocus = {
  mounted: (el) => el.focus()
}

// default
export default {
  setup() {
  },
  directives: { // 在模板中启用 v-focus focus: { /* ... */ } }
}

// template
<template> <input v-focus /> </template>

在接下来的全局注册到应用层级，文档就并不是非常的清晰了。

首先要知道，全局注册时需要挂在到根组件#App上，不同于vue2不需要被use使用，vue3的机制是你的指令必须要被注册成方法的，这样你才能全局使用到自定义指令，细看可以知道，use接收一个方法，方法返回参数携带app<HostElement>，我们就可以拿到app去注册全局指令了。

use(plugin: Plugin_2, ...options: any[]): CompatVue;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JboNzc0S-1664256834054)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f9100787a0b74ca3a73b575a84049435~tplv-k3u1fbpfcp-watermark.image?)]

单文件注册

// v-focus.ts

import type { App } from 'vue'

const install = (Vue: App) => {
  Vue.directive('auto-scroll', (el) => {
    el.focus()
  })
}

export default install

// main.ts
import VFocus from './utils/v-focus'

createApp(App)
  .use(VFocus)
  .mount('#app')

多文件注册

// index.ts

import type { App } from 'vue'
import vFocus from './v-focus'

const directives = {
    'v-focus': vFocus,
    'XXX': XXX
}
const install = (Vue: App) => {
  Obeject.keys(directives).forEach((key) => {
    Vue.directive(key, directives[key])
  })
}

export default install

// main.ts
import Directives from './utils'

createApp(App)
  .use(Directives)
  .mount('#app')

最后就可以全局使用了

<template> <input v-focus /> </template>