vue3自定义指令

通常情况下，如果你需要对DOM元素进行底层操作，这个时候就需要使用到自定义指令。在vue3中我们可以自定义局部指令和全局指令，接下来让我们来自定义一个v-focus自动获取焦点的指令吧。

1.局部指令

局部指令只能在当前组件使用。那么怎么定义局部指令呢？我们在directives选项中命名一个名为focus的指令，focus中有很多生命周期(created, bdforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted)，在mounted钩子中有4个参数，通过el.focus()获取到焦点。代码如下：

export default {
  directives: {
    focus: {
      mounted(el, bindings, vnode, preVnode) {
        el.focus()
      }
    }
  }
};

这样，我们只需在input标签中加上v-focus就可以在挂载时自动获取焦点啦。代码如下：

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

2.全局指令

如果想要定义全局指令，那么在vue的main.js函数中，我们要通过const app = createApp(App)来创建实例，再通过app.directive() 来自定义指令，app.directive('name',{ })跟两个参数，第一个是指令名称，第二个是相关操作。示例代码如下：

import { createApp } from 'vue'
import App from './03.自定义指令/App.vue'

const app = createApp(App)
app.directive('focus', {
  mounted(el, bindings, vnode, preVnode) {
    el.focus()
  }
})
app.mount('#app')

这样我们就可以在任意组件使用v-focus指令来获取焦点了。