在 Vue 3 的 中，导入的自定义组件无需注册或声明，直接导入即可在模板中使用；命名需严格匹配（PascalCase），路径须带 .vue 后缀，支持别名导入。

在 Vue 3 的 <script setup></script> 中，导入的自定义组件无需注册、无需声明、无需 components 选项，只要正确导入，就能直接在模板中使用。

---

✅ 正确写法：直接导入 + 直接使用

假设你有一个自定义按钮组件 CustomButton.vue，位于 @/components/CustomButton.vue：

<!-- Parent.vue -->
<template>
  <div>
    <CustomButton label="提交" @click="handleSubmit" />
  </div>
</template>

<script setup>
import CustomButton from '@/components/CustomButton.vue'
const handleSubmit = () => {
  console.log('已点击')
}
</script>

• CustomButton 是 PascalCase 命名（首字母大写），文件名也应为 CustomButton.vue
• 导入后，组件名自动成为模板中的标签名，大小写敏感，必须与导入变量名一致
• 不需要 components: { CustomButton }，也不需要 defineComponent 包裹

---

⚠️ 常见错误与注意事项

• 命名必须匹配
  导入语句是 import MyCard from './MyCard.vue'，模板里就必须写 <mycard></mycard>，不能写 <my-card></my-card> 或 <mycard></mycard>（除非显式重命名）

• 路径要正确，且带 .vue 后缀
  尤其在某些构建工具（如 Vite）中，省略 .vue 可能导致 HMR 失效或类型推导丢失

• 不能在 <script setup></script> 中用 const Button = defineComponent(...) 方式动态创建再使用
  这类运行时定义的组件不会被自动注册，仍需手动注册到 components（此时已不推荐）

• 如果组件是目录形式（如 ./Button/），需确保目录下有 index.vue 或显式指定入口
  例如：import Button from '@/components/Button/index.vue'

---

? 补充：支持别名导入

你可以用别名简化长路径或避免命名冲突：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

import SubmitBtn from '@/components/buttons/PrimaryButton.vue'
import CancelBtn from '@/components/buttons/SecondaryButton.vue'

模板中对应使用：

立即学习“前端免费学习笔记（深入）”；

<SubmitBtn @click="onSubmit" />
<CancelBtn @click="onCancel" />

---

不需要额外配置，不依赖插件，这是 <script setup></script> 的默认行为。只要导入了，就“即刻可用”。