vue3自定义指令

在Vue3中，创建自定义指令与Vue2的方式有些不同。下面是创建自定义指令的步骤：

1. 在Vue的组件中，使用directive函数来创建自定义指令。

import { directive } from 'vue';

directive('my-directive', {
  //指令的钩子函数
  mounted(el, binding, vnode, prevVnode) {
    //指令绑定时触发
  },
  updated(el, binding, vnode, prevVnode) {
    //指令更新时触发
  },
  unmounted(el, binding, vnode, prevVnode) {
    //指令解绑时触发
  }
})

2. 在组件模板中应用自定义指令。

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

3. 自定义指令的钩子函数包含四个参数：

• el：指令所绑定的元素
• binding：一个对象，包含指令的信息，如指令的值、参数等
• vnode：Vue编译生成的虚拟节点
• prevVnode：之前的虚拟节点

示例：

import { directive } from 'vue';

directive('highlight', {
  beforeMount(el, binding) {
    el.style.backgroundColor = binding.value;
  },
  updated(el, binding) {
    el.style.backgroundColor = binding.value;
  },
  unmounted(el, binding) {
    el.style.backgroundColor = null;
  }
});

<template>
  <div v-highlight="'#ffff00'">Highlight me!</div>
</template>

这个指令将元素的背景颜色设置为黄色。当指令的值发生变化时，更新背景颜色。当指令取消绑定时，将背景色设置为null。