Vue 组件通信方式选择
Vue 中 props、emit、slot、provide/inject 与状态管理在不同通信层级下的选择思路。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
Vue 组件通信方式选择
Vue 组件通信真正难的地方，通常不是不会 API，而是不知道该先判断通信层级和语义。
一句话定义
Vue 组件通信方式的选择，关键不是“哪个更强”，而是“当前问题到底是父子传值、内容组合、跨层上下文，还是业务级共享状态”。
一条实用判断线
父子直接传值
优先 props / emit。
如果它本质上就是一个标准值通道，也可以继续看 vue-define-model。
父组件决定内容结构
优先 slot。
祖先到后代跨层共享上下文
考虑 provide/inject。
跨页面、跨模块、业务级共享状态
考虑状态管理，比如 pinia。
为什么这层值得单独拆出来
因为很多设计混乱，本质都是通信问题被误判：
- 该
props的地方用了全局状态 - 该
slot的地方塞了一堆配置型 props - 该
provide/inject的地方硬层层传值
最短记忆方式
先判断通信层级，再决定通信方式。
面试要点
来自 vue-component-communication-selection-interview-question 的面试视角整理。
一句话回答
父子直接通信优先 props/emit，内容结构交给父组件时用 slot，祖先到后代共享上下文考虑 provide/inject，而业务级共享状态再考虑 Pinia 这类状态管理方案。
最稳的回答主线
- 父子数据流：
props/emit - 内容组合：
slot - 跨层上下文：
provide/inject - 跨页面和业务级共享：
Pinia
最短记忆方式
先判断是父子、组合、跨层还是全局，再选通信方式。