props/events 适用于父子组件间单向数据传递与事件通知，如父传初始值、子触发刷新或关闭等临时ui状态；状态管理（pinia/vuex）用于跨组件、跨页面的共享状态，如登录信息、购物车、主题偏好等需集中维护与持久化的场景。
Props 和 Events 是 Vue 中处理父子组件通信的默认方式，而状态管理（如 Pinia）适用于跨组件、跨页面、需持久或共享的数据。选错方案会导致冗余代码、调试困难、响应变慢，甚至破坏单向数据流原则。
Props/Events 适合什么场景
当数据只在父子之间流动、生命周期绑定紧密、不被其他模块复用时，Props/Events 就是最佳选择。
- 父组件传初始值给子组件（如表单字段、弹窗显隐开关）
- 子组件触发操作后通知父组件（如“保存成功”后刷新列表、“取消”后关闭弹窗）
- 临时 UI 状态（按钮 loading、输入框 focus、下拉展开状态）——这些不该进 store
- 子组件通过 v-model 或 @update:xxx 同步内部状态，本质仍是 Events 的语法糖
状态管理（Pinia/Vuex）该什么时候用
状态管理不是“所有共享数据都放进去”，而是解决真正需要集中维护的场景。
- 用户登录态、权限信息、全局主题偏好等跨路由、跨组件复用的状态
- 多个不相关组件同时依赖并修改同一份数据（如购物车数量、未读消息数）
- 需要持久化（localStorage）、服务端同步或时间旅行调试的业务状态
- 复杂表单分布在多个页面或步骤中，状态需保持且可回溯
Provide/Inject 作为中间层补充
它不是状态管理，也不是替代 Props 的通用方案，而是为“祖孙组件”提供轻量穿透能力。
- 注入全局配置（如 API 基础路径、国际化 locale）
- 传递上下文对象（如表单校验器实例、表格操作工具集）
- 避免中间层组件被动转发 props，减少无意义透传
- 注意：inject 返回值类型推断弱，建议配合 TypeScript interface 显式声明
常见误用与规避建议
很多项目把简单交互硬塞进 store，反而增加心智负担和维护成本。
- 不要为一个弹窗的 visible 单独建 store 字段——用 props 控制 v-if 更直接
- 不要在子组件里 dispatch 一个只影响自身 UI 的 action——emit 事件由父组件统一响应更可控
- 兄弟组件通信优先走共同父组件中转，而非立刻引入 Pinia 或 Event Bus
- Provide/Inject 不要用于频繁变更的状态——响应式更新可能不及时，且难以追踪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
