vue3自定义指令

1.自定义指令

自己定义自定义指令的方法，实现我们需要的指令功能。

2.传递方式

在Vue 3中，引入了Composition API（组合式API），所以不能直接通过directive函数进行自定义指令的注册。我们可以通过创建一个自定义指令对象并将其传递给app.directive()方法来达到类似的效果。下面是一个示例代码：

// main.js (主文件)
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 自定义指令
const myDirective = {
mounted(el, binding) {

// 在元素被插入页面时触发
el.style.color = binding.value;

},
};

// 注册自定义指令
app.directive('my-directive', myDirective);
app.mount('#app');

3.代码解析

首先导入了需要的模块，然后创建了一个应用程序实例 app，然后定义了一个名为 myDirective 的自定义指令对象，该对象包含了两个生命周期钩子函数：mounted 和 updated。其中我只用了 mounted 钩子函数的实现，当元素被插入页面时会调用此函数。最后，我们通过 app.directive() 方法将自定义指令注册到应用程序中，第一个参数是指令的名称，第二个参数是自定义指令对象。