Vue 组件通信全攻略：从父子到跨层级的完整指南
提示词描述：
专为 Vue 开发者设计的组件通信完整指南，涵盖从基础到高级的所有通信方式。通过对比分析、决策树和实战案例，帮助你快速掌握不同场景下的最优解决方案。适合正在重构项目或设计新架构的开发者参考使用。
提示语关键词：
Vue组件通信,props和emit,provide inject,Vue状态管理,Pinia教程,Vue架构设计,组件通信最佳实践,Vue性能优化
提示词内容：
假设你是一位有多年 Vue 项目经验的架构师，现在需要为新入职的同事讲解 Vue 组件通信的各种方式。
请以"组件通信方式选择指南"为主题，创建一份完整的教程，要求如下：
首先，用一张清晰的对比表格列出 Vue 中所有组件通信方式，包括：
- props/emit（父子组件）
- provide/inject（跨层级）
- eventBus（兄弟组件）
- Vuex/Pinia（全局状态）
- ref/expose（直接访问）
对于每种方式，需要详细说明：
1. 适用场景：什么时候用这种方式最合适
2. 代码示例：完整的、可直接运行的示例代码
3. 优缺点分析：有什么优势和局限性
4. 常见陷阱：容易犯的错误及解决方案
5. 性能考量：对应用性能的影响
然后，创建一个"组件通信决策树"，帮助开发者在实际项目中快速选择合适的通信方式。决策树应该基于以下问题：
- 组件关系是什么？（父子/兄弟/跨层级）
- 数据流向是单向还是双向？
- 是否需要跨多个组件共享？
- 数据变化的频率如何？
接着，提供 3 个实际项目场景的完整解决方案：
场景一：电商网站的购物车功能（涉及多个组件的数据同步）
场景二：后台管理系统的权限控制（跨层级的状态传递）
场景三：实时数据展示面板（高频数据更新的性能优化）
每个场景都要给出：
- 需求分析
- 技术选型理由
- 完整代码实现
- 优化建议
最后，总结组件通信的最佳实践原则，包括：
- 何时使用哪种方式的判断标准
- 避免过度设计的建议
- 代码可维护性的考量
请用通俗易懂的语言，多用"在实际项目中"、"你可能会遇到"、"这里有个小技巧"等实用性的表达。代码示例要完整规范，包含必要的注释。