vue3的自定义指令详解

一、认识自定义指令

在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来自定义自己的指令

• 注意：在Vue中，代码的复用和抽象主要还是通过组件
• 通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令

自定义指令分为两种

• 自定义局部指令：组件中通过directives 选项，只能在当前组件中使用
• 自定义全局指令：app的 directive 方法，可以在任意组件中被使用

比如我们来做一个非常简单的案例：当某个元素挂载完成后可以自定获取焦点

• 实现方式一：如果我们使用默认的实现方式

<template>
  <div>
    <input type="text" ref="input" />
  </div>
</template>

<script>
import {
    ref, onMounted } from "vue";

export default {
   
  setup () {
   
    const input = ref(null);

    onMounted(() => {
   
      input.value.focus();
    })

    return {
   
      input
    }
  }
}
</script>

<style scoped>
</style>

• 实现方式二：自定义一个 v-focus 的局部指令

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

<script>
  export default {
   
    // 局部指令
    directives: {
   
      focus: {
   
        mounted(el, bindings, vnode, preVnode) {
   
          console.log("focus mounted");
          el.focus(