UniApp 自定义 hooks 里引入组件，Vue 里无法使用？这样解决！

在 UniApp 项目中，很多人为了代码复用，会在 hooks 里封装一些逻辑，比如 useTestDialog 这样的方法，把 TestDialog 组件作为返回值传出去：

<!-- 组件调用 -->
<template>
  <TestDialog></TestDialog>
</template>

<script setup>
import { useTestDialog } from '@/hooks/test'
const { TestDialog } = useTestDialog()
</script>

但是这样做在 Vue 里是无法使用的！ 原因是什么？该怎么解决？

为什么 Vue 里无法使用？

在 Vue 里，组件必须在 setup 之外就完成注册，否则 Vue 无法解析 <TestDialog /> 这个标签。

而 useTestDialog 只是返回了 TestDialog，并没有完成注册，Vue 根本不知道这个组件是谁！

更重要的是，UniApp 的多端环境（比如小程序、App 端）对组件的解析方式与 Web 端不同，不能动态传递组件，所以即便在 hooks 里正确返回了 TestDialog，也无法让 Vue 识别它。

正确的解决方案

✅ 方案 1：全局注册组件

如果 TestDialog 是很多页面都会用到的组件，可以直接在 main.js 里全局注册：

import { createApp } from 'vue'
import App from './App.vue'
import TestDialog from '@/components/testDialog.vue'

const app = createApp(App)
app.component('TestDialog', TestDialog) // 全局注册
app.mount('#app')

这样，在任何 vue 文件里都可以直接使用 <TestDialog />，不需要再单独 import 组件。

✅ 方案 2：使用 uni_modules 自动注册

UniApp 支持 uni_modules 机制，组件可以自动注册，无需手动 import。

步骤如下：

1. 创建 uni_modules/test-dialog 文件夹
2. 在 uni_modules/test-dialog/components/ 里放入 TestDialog.vue
3. 在 uni_modules/test-dialog/manifest.json 里注册组件

示例：

{
  "name": "test-dialog",
  "version": "1.0.0",
  "components": [
    {
      "path": "components/TestDialog.vue",
      "name": "TestDialog"
    }
  ]
}

这样，TestDialog 就能在全局直接使用，而不需要 import！

总结

🚀 不要在 hooks 里返回组件，因为 Vue 需要组件在 setup 之前就完成注册。 🚀 如果多个 vue 文件都要用这个组件，可以全局注册或使用 uni_modules 自动注册，保证多端一致性。

这样既能减少 import 的重复代码，又能让 TestDialog 在 Vue 里正常解析，完美解决问题！