Vue3.0如何自定义指令，一看就会

【前言】在vue提供了大量的指令来提高开发效率，例如内置指令v-model，v-bind，v-if等等，这些内置指令可以满足日常基本的需求，为了解决一些特殊的需求，Vue官方也提供了一种自定义指令,开发者可以自己定义指令名称，自己实现指令的逻辑，自定义指令通常以v-开头，这篇文章将介绍如何定义和使用一个自定义指令。

注册自定义指令

自定义指令注册分为全局注册和局部注册两种,而在项目中最常用的就是全局注册。

局部注册

在每个vue组件中，可以在directives节点下声明一个局部私有自定义指令，以文本输入框自动获取焦点为例，注册一个自定义指令，语法如下：

directives:{
//自定义一个私有指令(focus为指令名)
focus:{
//当被绑定的元素插入到DOM中时，自动触发mounted函数
mounted(el){
//让被绑定的元素自动获得焦点
el.focus()
     }
  }
}

• 组件中使用

<template>
  <input v-focus type="text">
</template>

• 效果演示

全局注册

全局注册的自定义指令在任意组件中都可以使用，以Vue3为例，需要借助install方法，将指令挂载到全局。以给p标签的文字设置颜色为例，注册一个全局自定义组件。

1. 在项目的src目录下新建directive文件夹,新建index.js，用来存放项目的全局指令。
2. 将文件引入到main.js全局注册。

• 代码如下：

export default {
    install(app){
    //注册自定义指令（指令名为color）
        app.directive('color',{
            mounted(el){
            //改变元素的颜色
                el.style.color = '#004ef3'
            }
        })
    }
}

• 引入到main.js中，全局注册

// 注册全局指令
import Directives from '@/directive'
const app = createApp(App)
//挂载全局指令到全局
app.use(Directives)
app.mount('#app')

• 组件中使用

<template>
  <p v-color>我是全局注册的自定义指令</p>
</template>

• 效果演示