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;

单文件注册

// 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>