vue3 引入自定义指令

在Vue 3中，引入自定义指令可以通过全局注册或局部注册的方式进行。

全局注册自定义指令：

在Vue实例创建之前，通过app.directive方法注册自定义指令。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('myDirective', {
  mounted(el, binding) {
    // 指令绑定到元素上时触发
  },
  updated(el, binding) {
    // 元素更新时触发
  },
  unmounted(el, binding) {
    // 指令解绑时触发
  }
});

app.mount('#app');

局部注册自定义指令：

在组件内部，通过directives选项注册自定义指令。

import { defineComponent } from 'vue';

export default defineComponent({
  directives: {
    myDirective: {
      mounted(el, binding) {
        // 指令绑定到元素上时触发
      },
      updated(el, binding) {
        // 元素更新时触发
      },
      unmounted(el, binding) {
        // 指令解绑时触发
      }
    }
  },
  // ...
});

使用自定义指令：

在模板中使用自定义指令。

<template>
  <div v-my-directive></div>
</template>

在上述例子中，我们定义了一个名为myDirective的自定义指令，并在组件内部或全局中注册。然后，在模板中通过v-my-directive的形式使用自定义指令，指令的生命周期钩子函数会在相应的时机被调用