Vue自定义tooltip指令在子组件中无法解析问题求助

AI 小北

2026-6-15

问题原因分析

你的问题核心是指令作用域限制：

若仅在父组件中局部注册v-tooltip指令，Vue 3的<script setup>属于模块级作用域，子组件无法继承父组件的局部指令，因此会触发Failed to resolve directive: tooltip报错。
若已尝试全局注册但仍报错，大概率是注册时机错误（比如在应用挂载后才执行注册代码），或者注册逻辑未被正确执行。

解决方案

根据业务场景，推荐两种可行方案：

方案一：全局注册指令（推荐）

在应用入口文件（如main.ts）中全局注册指令，所有组件无需单独导入即可直接使用：

import { createApp } from 'vue'
import App from './App.vue'
// 导入你的自定义tooltip指令文件
import tooltipDirective from './directives/tooltip'

const app = createApp(App)
// 全局注册v-tooltip指令
app.directive('tooltip', tooltipDirective)

app.mount('#app')

方案二：子组件局部注册指令

如果不需要全局注册，可在子组件SomeComponent.vue中显式导入并注册指令：

<template>
  <div v-tooltip="tooltipText">🛈</div>
</template>

<script setup>
import tooltipDirective from '../directives/tooltip'
defineProps<{ tooltipText?: string }>()

// 局部注册指令，变量名需遵循v开头的驼峰规则（vTooltip对应模板中的v-tooltip）
const vTooltip = tooltipDirective
</script>

也可通过defineOptions注册：

<template>
  <div v-tooltip="tooltipText">🛈</div>
</template>

<script setup>
import tooltipDirective from '../directives/tooltip'
defineProps<{ tooltipText?: string }>()

defineOptions({
  directives: {
    tooltip: tooltipDirective
  }
})
</script>

验证要点