Vue 通信方式对比
Vue 中 props、emit、slot、v-model、provide/inject 与 Pinia 在通信语义上的对比总览。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
Vue 通信方式对比
Vue 通信方式最容易混乱的地方，在于不同 API 解决的是不同层级的问题，却经常被放在一起随便替代。
一句话定义
props/emit 解决父子数据流，slot 解决内容组合，v-model 解决输入值同步语法糖，provide/inject 解决跨层上下文，Pinia 解决业务级共享状态。
一张实用心智图
props / emit
- 父子直接通信
- 最基础、最清晰
slot
- 父组件决定内容结构
- 更偏组合能力
v-model
- 基于
props + emit的约定语法糖 - 更适合输入值同步场景
provide / inject
- 祖先到后代跨层上下文共享
- 不适合滥用成隐式全局状态
Pinia
- 多组件、多页面共享业务状态
- 更适合集中管理和追踪
最容易混淆的点
v-model不是另一套数据流，它还是站在props/emit上provide/inject不等于状态管理slot解决的是内容结构，不是单纯传值
最短记忆方式
先分“传值、传结构、跨层、共享状态”，再选 Vue 通信方式。
面试要点
来自 vue-communication-comparison-interview-question 的面试视角整理。
一句话回答
props/emit 处理父子数据流，slot 处理内容结构，v-model 是值同步语法糖，provide/inject 处理跨层上下文，Pinia 处理业务级共享状态，它们不在同一层竞争。
最稳的回答主线
- 父子传值：
props/emit - 内容组合：
slot - 输入同步：
v-model - 跨层上下文：
provide/inject - 业务共享状态：Pinia
最短记忆方式
Vue 通信方式不是谁替代谁，而是谁负责哪一层。