在 Vue 3 中，我们可以通过使用 app.directive 方法来定义自定义指令。下面是一个简单的例子：
<template>
<div v-highlight>Hello Vue 3!</div>
</template>
<script>
import { createApp } from 'vue';
const app = createApp({});
app.directive('highlight', {
mounted(el) {
el.style.backgroundColor = 'yellow';
},
unmounted(el) {
el.style.backgroundColor = '';
},
});
app.mount('#app');
</script>
在上面的例子中，我们定义了一个名为 highlight 的自定义指令，它在元素被挂载时将其背景颜色设置为黄色，并在元素被卸载时将背景颜色重置为空。
在 mounted 和 unmounted 方法中，我们可以通过参数 el 来访问指令所绑定的元素。通过修改元素的样式来实现指令的功能。文章来源：https://www.toymoban.com/news/detail-802342.html
注意：指令只能在组件的模板中使用，而不能在组件的选项中使用。文章来源地址https://www.toymoban.com/news/detail-802342.html
到了这里，关于vue3自定义指令的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
