Vue 3 <script setup>语法下如何注册局部自定义指令

正确实现方法 #

在<script setup>中注册组件作用域的自定义指令不需要手动配置directives选项，只需要遵循特定的命名规则即可：指令对应的变量名必须以v为前缀，使用驼峰格式命名，Vue会自动将其识别为局部自定义指令。

示例代码 #

<script setup>
// 导入时重命名为 v 开头的驼峰格式
import { customDirective as vCustomDirective } from './customDirective';

// 如果是在当前组件内定义的指令，也遵循同样命名规则
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <!-- 模板中可以直接用 kebab-case 格式调用 -->
  <div v-custom-directive></div>
  <input v-focus>
</template>

报错原因说明 #

你之前的写法没有将指令变量命名为v开头的驼峰格式，Vue编译时不会将其识别为自定义指令，因此模板调用时会抛出Failed to resolve directive的错误。

内容的提问来源于stack exchange，提问作者lejhbah