161 字
1 分钟
组件通信：Props 传值传到手抽筋
Props, Emit, Provide, Inject…
Vue 的组件通信方式不少。父子通信用 Props/Emit，跨层级用 Provide/Inject，松散事件可以用 mitt，全局共享状态再考虑 Pinia。
传值的痛苦
当你有 5 层组件嵌套，最外层的组件想传个 ID 给最里面的组件。 Props Drilling（属性透传）简直是灾难。
Parent -> Child -> GrandChild -> GreatGrandChild -> Target
每一层都要声明 Props，写得我想吐。虽说可以用 provide/inject，但不仅失去了类型推断的便利（TS 还要额外定义 InjectionKey），而且数据流变得难以追踪。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
组件通信：Props 传值传到手抽筋
https://blog.luozili.work/posts/vue-learning-7/ 部分信息可能已经过时
相关文章 智能推荐
1
生命周期钩子：生老病死，Vue 组件的一生
Vue学习之路 按创建、挂载、更新和卸载阶段梳理 Vue 3 组件生命周期，以及各类钩子的典型使用场景。
2
Ref vs Reactive：响应式的哲学思考 (头秃篇)
Vue学习之路 对比 Vue 3 中 ref 与 reactive 的使用边界，以及解构、替换对象和模板自动解包时容易踩到的坑。
3
深坑记录：响应式丢失的那一夜
Vue学习之路 复盘一次保存成功但列表不更新的问题，定位对象解构导致的 Vue 响应式丢失，并总结排查顺序。
4
Composition API：逻辑复用的快乐与痛苦
Vue学习之路 记录用 Composable 提取 Vue 3 业务逻辑时的收益、边界，以及逻辑复用过度后出现的新复杂度。
5
Vue 3 启航
Vue学习之路 从 jQuery 时代的回忆出发，记录第一次系统学习 Vue 3、Vite 与组合式 API 的过程。