第4章 组件化设计与组件通信
组件通信是 Vue 面试的必考深水区。团队负责人不仅需要熟练使用 props/emit、provide/inject、slot、v-model，更要在架构层面做出正确的通信选型决策。本章从高频问答到实战案例，完整呈现高阶面试的应答逻辑。
📊 组件通信方式速查表
| 通信方式 | 适用场景 | 数据流 | 响应式 | 耦合度 |
|---|
| props / emit | 父子直接通信 | 单向 ↓ ↑ | ✅ 是 | 低（显式） |
| v-model | 父子双向绑定 | 双向 ↔ | ✅ 是 | 低（语法糖） |
| provide / inject | 跨多层传递 | 隐式 ↓ | ⚠️ 需包装 | 中（隐式依赖） |
| slot / 作用域插槽 | 结构分发 & 反向传值 | 父→子→父 | — | 低（模板驱动） |
| Vuex / Pinia | 全局复杂状态 | 集中式 ↔ | ✅ 是 | 中（集中管理） |
| eventBus / mitt | 任意组件（非推荐） | 事件广播 | ❌ 手动 | 高（难追踪） |
🎯 面试问答卡片
Q1：Vue 组件通信方式有哪些？如何在项目中做选型？
| 考察点 | 全局认知、场景匹配能力、架构决策思维 |
| 回答框架 | ① 分类列举（父子/跨层/全局）→ ② 场景匹配（关系/复杂度）→ ③ 选型依据（显式优先、够用就好） |
| 示例回答 | “分为三类：父子用 props/emit 和 v-model；跨多层用 provide/inject 和 slot；全局复杂状态用 Pinia。选型优先考虑组件关系——父子显式传参，跨层用 provide 注入，多组件共享状态才引入 Pinia。原则是‘够用就好’，避免过度设计。” （82字） |
| 可能追问 | ① provide/inject 如何保持响应式？ ② 多个 v-model 如何在一个组件上实现？ |
| 避坑提醒 | 不要用 provide/inject 替代普通父子 props，会破坏组件独立性与可维护性；避免 eventBus 滥用导致逻辑分散。 |
Q2：provide / inject 的响应式原理是什么？适用场景和边界？
| 考察点 | 响应式原理理解、适用边界判断、最佳实践意识 |
| 回答框架 | ① 原理：provide 提供响应式对象 → inject 注入建立依赖链 → ② 场景：主题配置/权限数据/国际化 → ③ 边界：非响应式陷阱、命名冲突、类型安全 |
| 示例回答 | “provide/inject 适用于跨多层传参，如主题或权限。原理是祖先提供响应式对象，后代注入依赖。注意默认非响应式，必须传递 ref/reactive 包装的值。适合‘隐式依赖’场景，但不宜替代 props 的显式声明，否则排查困难。”（93字） |
| 可能追问 | ① 如何解决 provide/inject 响应式丢失？ ② 与 Pinia 的适用边界如何划分？ |
| 避坑提醒 | 传值时必须用 computed、ref 或 reactive 包装，否则 inject 方无法追踪变化；避免在非父子链路中滥用。 |
Q3：自定义组件 v-model 的高阶用法有哪些？如何设计多 v-model 协议？
| 考察点 | v-model 机制深度、组件封装能力、协议设计思维 |
| 回答框架 | ① 本质：modelValue + update:modelValue → ② 多 v-model：v-model:name / v-model:age → ③ 修饰符：自定义修饰符处理格式
|