Vue 3中引入子组件需三步：导入（import）、注册（<script setup>下自动完成）、使用（模板中写<PascalCase>标签）；路径须准确，组件名大小写敏感，非setup需显式注册。
在 Vue 3 单文件组件（.vue）中引入子组件，核心是三步：导入、注册、使用。使用 <script setup> 语法时，注册环节被简化，但逻辑依然清晰。
导入子组件文件
在 <script setup> 中用 import 语句加载子组件模块，路径需准确（相对路径常见）：
import Header from './components/Header.vue'-
import ProductList from '@/components/ProductList.vue'（支持别名如@指向src）
注册子组件（<script setup> 下自动完成）
使用 <script setup> 时，只要导入了组件变量，它就默认在模板中可用，无需手动写 components: { Header } —— 这是 Vue 3 的语法糖优化：
- 导入即注册，变量名首字母大写（如
Header）会被识别为组件名 - 若导入时重命名（
import MyHeader from './Header.vue'），模板中就得用<MyHeader></MyHeader>
在模板中使用子组件标签
直接以自定义标签形式写入 <template>，注意命名规范和闭合：
立即学习“前端免费学习笔记（深入）”；
- 推荐 PascalCase（如
<Header></Header>或自闭合<Header />） - 避免 kebab-case 在模板中写成
<my-header>（虽支持，但易与原生 HTML 标签混淆） - 确保子组件已导出默认（
export default { ... }或defineComponent(...)）
补充说明：非 <script setup> 写法（兼容旧习惯）
如果不用 <script setup>，需显式注册：
- 在
export default对象中添加components选项：components: { Header } - 导入语句不变，但注册步骤不可省略
不复杂但容易忽略的是路径错误和大小写不一致——Vue 对组件名大小写敏感，且开发服务器不会自动纠正路径拼写。
