Vue组件通信方式总览
Vue 中 props、emit、slot、provide/inject 与状态管理之间的通信边界总览。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
- 所属 MOC: Vue MOC
- 相关概念: Vue中的props和emit, vue3-slots, Vue中的provide和inject, pinia
Vue组件通信方式总览
Vue 里没有一种“万能通信方式”。不同接口适合的层级、语义和边界并不一样，这篇笔记只负责把它们放回同一张地图里。
为什么要放在一起理解
因为很多组件设计问题，本质都不是“不会 API”，而是没有先判断：
- 这是父子直接通信吗
- 这是跨层上下文共享吗
- 这是内容组合吗
- 这是全局共享状态吗
最常见的几种方式
props / emit
适合父子之间的标准数据流。
slot
适合把内容结构交给父组件决定，而不是只传几个值。
provide / inject
适合祖先组件向后代共享上下文，避免层层传参。
状态管理
适合跨页面、跨模块、需要集中管理的共享状态。
- 见 pinia
一条实用判断线
- 父子直接通信，优先
props / emit - 需要开放内容结构，考虑
slot - 只是跨层传上下文，考虑
provide / inject - 已经是业务级共享状态，再考虑 pinia
常见误区
- 用全局状态解决本来只需要父子传值的问题
- 用
provide/inject偷偷替代正常组件接口 - 明明是结构组合问题，却硬塞一堆
props
最短记忆方式
Vue 组件通信不是选“最强的方式”，而是选“语义最匹配的方式”。