vue 3 script setup 中子组件导入即用，自动注册无需 components 声明；需首字母大写命名、正确路径；支持 props/emit 通信；需 defineexpose 才能 ref 访问；可配合 defineasynccomponent 懒加载。
在 Vue 3 的 script setup 中导入并使用子组件，核心是“自动注册 + 模板直接调用”，无需手动声明 components 选项，简洁又符合直觉。
直接 import 后即可当标签名使用
只要在 script setup 中通过 import 引入子组件，它就会自动成为模板中的合法标签名：
- 子组件路径需正确（如
./components/FilterPanel.vue） - 导入的变量名首字母大写（推荐惯例，如
FilterPanel），否则可能被 Vue 当作原生 HTML 标签忽略 - 模板中直接写
<filterpanel></filterpanel>即可渲染
支持传参与事件绑定（props / emit）
父子通信沿用标准方式，无需额外配置：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 父组件通过属性绑定传值：
<usercard :user="currentUser" size="large"></usercard> - 子组件用
defineProps接收（支持类型推导） - 子组件触发事件用
defineEmits声明，父组件用@event-name监听
需要 ref 访问子组件时，配合 defineExpose
若父组件需主动调用子组件方法或读取内部状态，必须显式暴露：
- 子组件内调用
defineExpose({ reset, getData }) - 父组件用
ref绑定，例如<form ref="formRef"></form> - 在
onMounted或事件回调中通过formRef.value.reset()调用 - 注意：未被
defineExpose的内容对外不可见，保障封装性
按需异步加载（提升首屏性能）
对非关键子组件，可用 defineAsyncComponent 实现懒加载：
- 写法：
const HeavyChart = defineAsyncComponent(() => import('./HeavyChart.vue')) - 模板中仍写作
<heavychart></heavychart>，行为与同步组件一致 - 适合模态框、数据看板、富文本编辑器等重型组件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
