vue3自定义指令

Vue3 中自定义指令的方法和 Vue2 有些不同。

在 Vue3 中，我们需要使用 `directive` 函数来创建一个自定义指令。`directive` 函数接收两个参数：指令名称和指令配置对象。

下面是一个简单的例子：

import { directive } from 'vue';

const myDirective = directive('my-directive', {
  mounted(el, binding) {
    // 指令绑定到元素上时调用
  },
  updated(el, binding) {
    // 元素更新时调用
  },
  unmounted(el, binding) {
    // 指令从元素上解绑时调用
  }
});

export default myDirective;

上面的代码定义了一个名为 `my-directive` 的指令，并且在指令配置对象中定义了 `mounted`、`updated` 和 `unmounted` 三个钩子函数。

我们可以使用 `app.directive()` 方法来注册这个自定义指令：

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

const app = createApp({});

app.directive('my-directive', myDirective);

app.mount('#app');

在模板中使用自定义指令的方式和 Vue2 中一样：

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

需要注意的是，在 Vue3 中，指令的参数绑定方式也发生了变化。在指令配置对象中，我们可以通过 `binding` 参数获取到指令的参数：

const myDirective = directive('my-directive', {
  mounted(el, binding) {
    console.log(binding.value); // 获取到参数的值
  }
});

在模板中使用带参数的指令的方式也有所变化：

<div v-my-directive="arg"></div>

上面的例子中，`arg` 就是指令的参数。在指令配置对象的钩子函数中，我们可以通过 `binding.value` 获取到这个参数的值。

希望这个例子能够帮助你理解 Vue3 中自定义指令的用法。