核心目标理解组件化开发的精髓掌握组件间的通信机制Props/Emits/Provide/Inject深入研究插槽的灵活性与异步组件的性能优化。 本章核心知识点知识点说明难度组件基础SFC 结构与组件注册⭐组件通信Props、Emits 与 v-model⭐⭐⭐插槽 (Slots)具名插槽与作用域插槽的本质⭐⭐⭐依赖注入Provide/Inject 跨层级通信⭐⭐⭐动态与异步component :is与Suspense⭐⭐⭐⭐2.1 组件化思想由点及面2.1.1 什么是组件组件是可复用的独立 UI 单元。在 Vue 中一个.vue文件就是一个组件SFC - Single File Component。高内聚相关的逻辑、模板和样式写在一起。低耦合通过明确的接口Props/Emits与其他组件交互。2.1.2 局部注册 vs 全局注册全局注册在main.ts中注册。优点是随时可用缺点是增加首屏体积无法 Tree-shaking。局部注册在script setup中直接import。优点是按需加载引用关系清晰。强烈推荐局部注册。2.2 核心通信Props 与 Emits2.2.1 Props —— 单向数据流父组件通过属性向子组件传递数据。只读性子组件绝对不能直接修改 PropsVue 会抛出警告。为什么保证数据追踪的单一性。如果子组件能改父数据会导致状态失控。script setup langts // 类型定义方式支持 IDE 补全与校验 const props defineProps{ title: string count?: number // 可选 }() /script2.2.2 Emits —— 状态回传子组件通过触发事件通知父组件。constemitdefineEmits([update,close])functionnotify(){emit(update,42)// 传参}2.3 插槽 (Slots)UI 的占位符2.3.1 渲染本质插槽本质上是子组件暴露给父组件的“渲染回调函数”。父组件决定如何填充子组件中预留的slot /位置。2.3.2 作用域插槽 (Scoped Slots)当父组件需要在插槽内访问子组件的数据时使用。!-- 子组件 -- slot nameitem :dataitemData / !-- 父组件 -- template #item{ data } span{{ data.name }}/span /template2.4 层级通信的高级方案2.4.1 Provide / Inject解决“Prop 逐级传递 (Prop Drilling)”的痛苦。祖先组件提供数据任意深度的后代组件均可注入。场景全局主题、国际化信息、复杂表单项同步。注意在inject时建议提供默认值以增强组件的健壮性。2.4.2 defineModel (Vue 3.4)极大简化了自定义v-model的实现。// 子组件constmodelValuedefineModel()// 直接修改 modelValue.value父组件会自动同步2.5 异步组件与性能2.5.1 defineAsyncComponent对于体积较大的组件如重型图表、地图、弹窗应当使用异步组件。原理只有在组件真正需要渲染到屏幕时才会发出网路请求下载该组件的代码。Suspense结合异步组件可以优雅地展示加载中、加载失败状态。 章节实战建议组件拆分粒度不要过度拆分。如果一段逻辑只在当前文件使用且不复杂没必要独立。默认值保护使用withDefaults为 Props 设置默认值。Scoped Style始终使用style scoped防止样式污染。专栏链接Vue 3 全栈开发实战专栏项目源码资源点击下载项目源码