在 Vue 3 的 中，导入的自定义组件无需注册或声明，直接导入即可在模板中使用；命名需严格匹配（PascalCase），路径须带 .vue 后缀，支持别名导入。
在 Vue 3 的 <script setup></script> 中，导入的自定义组件无需注册、无需声明、无需 components 选项，只要正确导入，就能直接在模板中使用。
✅ 正确写法：直接导入 + 直接使用
假设你有一个自定义按钮组件 CustomButton.vue，位于 @/components/CustomButton.vue：
<!-- Parent.vue -->
<template><div>
<custombutton label="提交"></custombutton>
</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'，模板里就必须写路径要正确，且带
.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></submitbtn><cancelbtn></cancelbtn>
不需要额外配置，不依赖插件，这是 <script setup></script> 的默认行为。只要导入了，就“即刻可用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
