Vue组件通信应遵循清晰架构：父子用props/$emit、兄弟提升状态、跨层级按需选provide/inject等；核心是数据单向流动、依赖明确、可维护可测试。
大型 Vue 项目中，组件通信不能靠临时拼凑，必须建立清晰、可维护、可测试的通信架构。核心原则是：父子通信走标准通道，兄弟通信不绕弯，跨层级不滥用全局状态。关键不是“能通”，而是“通得明白、改得安全、查得清楚”。
父子通信：严格遵循单向数据流 + 显式契约
父传子只用 props，子传父只用 $emit（Vue2）或 defineEmits（Vue3），这是最稳定、最易追踪的路径。
- props 必须用对象形式声明，包含 type、required、default（复杂类型用工厂函数）和 validator。例如：
userInfo: { type: Object, required: true, default: () => ({}) } - 避免在子组件中直接修改 props；如需响应式更新，应通过 emit 触发事件，由父组件决定是否变更源数据
- 事件命名采用 kebab-case（如
item-click、form-submit），语义明确，避免与原生事件冲突 - Vue3 中统一使用
defineProps和defineEmits，配合 TypeScript 接口定义 props 类型，实现编译期校验
兄弟组件通信：优先提升状态，慎用 EventBus
兄弟组件之间没有直接通信关系，强行用事件总线（EventBus）会带来隐式依赖、调试困难、内存泄漏等风险。规范做法是把共享状态上提至最近共同父组件。
- 将需要同步的数据（如表单字段、筛选条件、选中项）定义在父组件 data / ref 中，再通过 props 分发给各兄弟组件
- 兄弟组件通过各自的 $emit 向父组件反馈变更，父组件统一处理逻辑并向下同步新状态
- 仅在极少数场景（如全局通知、跨多层无关组件的轻量广播）才考虑基于 Vue 实例的事件总线，且必须配套
off清理或使用mitt等轻量库替代 - Vuex/Pinia 不应只为兄弟通信引入；若已使用状态管理，则将共享状态纳入 store，但需明确模块边界和 commit 命名规范
跨层级与高阶通信：按需分层，拒绝“一招鲜”
超过两层嵌套或涉及插槽、动态组件时，需分场景选择更精准的机制：
立即学习“前端免费学习笔记（深入）”；
- provide / inject：适用于祖辈向后代提供不可变配置或工具方法（如主题、API 实例、国际化函数），不用于响应式状态共享
- $attrs / $listeners（Vue2）或 v-bind="$attrs"（Vue3）：用于透传非 prop 属性和事件，常用于高阶组件或封装基础组件
- v-model（Vue2）或 v-model:xxx（Vue3）：对表单类组件封装双向绑定语法糖，本质仍是 props + emit 的封装，需显式支持
- 避免无节制使用
$parent或$children，它们破坏封装性，难以单元测试，且在 Vue3 中已被弱化
通信设计的本质是控制依赖流向。一个健康的 Vue 架构里，数据从上往下流，事件从下往上传，共享状态有明确归属。这样即使组件拆分到几十个，也能快速定位数据源头和副作用边界。
