vue3中怎么自定义指令

Vue 3 中自定义指令的方式与 Vue 2 有些不同，下面是一个简单的示例：

<template>
  <div v-highlight="'red'">Hello, World!</div>
</template>

<script>
import { directive } from 'vue';

const highlightDirective = directive('highlight', {
  mounted(el, binding) {
    el.style.backgroundColor = binding.value;
  },
});

export default {
  directives: {
    highlight: highlightDirective,
  },
};
</script>

在这个示例中，我们定义了一个名为 `highlight` 的自定义指令，它可以接受一个字符串类型的参数，表示高亮的颜色。在组件的模板中，我们使用 `v-highlight` 指令，并传入一个颜色值。

在组件的脚本中，我们使用 `directive` 函数定义自定义指令。这个函数接受两个参数，第一个参数是自定义指令的名字，第二个参数是一个对象，包含了自定义指令的生命周期函数。在这个示例中，我们只使用了 `mounted` 钩子函数，在组件挂载时设置元素的背景色。

最后，我们将自定义指令添加到组件的 `directives` 选项中，这样就可以在组件的模板中使用了。

注意：在 Vue 3 中，自定义指令需要使用 `directive` 函数来定义，而不是 Vue 2 中的 `Vue.directive`。