自定义指令

刘春龙原创2026/3/5小于 1 分钟

自定义指令是区分全局和局部注册，在全局注册，可以在任意组件中使用，局部注册，只在当前组件中使用

局部自定义指令

在上边的示例中，我们定义了一个名为 vChange 的执行，该指令会让标签下的文本变红色

使用规范

指令名为vChange，但是使用时要写成 v-change，务必遵循该规范

首先，在 main.ts 进行指令(v-red)的注册

const app = createApp(App)
app.directive('red', {
  mounted(element: any) {
    element.style.color = 'yellow'
  },
})

无需任何导入，直接使用

<template>
  <p v-red>123</p>
</template>

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。