vue3自定义指令directives

shadow_glory2026-06-05 9:57

闲的没事看了下之前的文章，有个vue2的自定义指令，那么就不充一个vue3的方便自己忘了的时候能看下吧。

vue3是真的方便的，script上写了setup之后下面就能省下很多东西。

main文件中直接定义全局指令：

javascript 复制代码

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.directive("color", {
  mounted(el) {
    el.style.color = "red";
  },
});

app.mount("#app");

vue文件中

html 复制代码

<div v-color>红色</div>

局部中使用：

javascript 复制代码

<script setup>
const vColor = {
  mounted: (el) => {
    el.style.color = "red";
  },
};
</script>

html 复制代码

<div v-color>红色</div>

仔细观察还是有区别的，全局中，自定义指令名是不需要加 v 的，而局部的指令用驼峰写法前面加上 v

那么，如何像 v-model 一样传参呢，简单

javascript 复制代码

<script setup>
const vColor = {
  mounted: (el, binding) => {
    el.style.color = binding.value;
  },
};
</script>

html 复制代码

<div v-color="'red'">红色</div>

通过自定义指令后面传去参数就可以啦，注意传入的数据格式，数据在接收到要使用.value

吃饭去啦~~~~~~~