[!info] related notes

• 所属 MOC: Vue MOC
• 选择决策: Vue 组件通信方式选择
• 父子数据: props / emit
• 双向值通道: v-model, defineModel
• 内容组合: Slots
• 跨层上下文: provide / inject
• 业务级共享状态: Pinia

Vue组件通信方式总览

这篇只负责地图

Vue 中没有一种“最强通信方式”。

这张图先回答：

不同通信机制分别解决什么语义？

真正“当前需求应该选哪个”的判断统一放在 Vue 组件通信方式选择。

五类通信语义

1. props / emit：父子数据契约

Parent
  ↓ props
Child
  ↑ emit
Parent

适合直接父子关系中的数据输入和事件通知。

详见 Vue props / emit。

2. v-model / defineModel：双向值通道

当组件暴露的是一个“可被父级控制、子级可请求更新”的值时：

modelValue
+ update:modelValue

可以用 v-model / defineModel 表达。

它本质仍建立在单向 contract 上，不意味着子组件任意修改父级状态。

3. slot：内容结构组合

Slot 解决的是：

谁来决定这一块 UI 结构？

它不是“另一种传变量方法”，而是把子组件的一部分渲染结构交给父级提供。

详见 Vue Slots。

4. provide / inject：跨层上下文

适合祖先给深层后代提供 context：

Provider
  ↓
intermediate components
  ↓
Deep child

典型内容：theme、form context、service/context object。

详见 provide / inject。

5. Pinia：业务级共享状态

当 state：

• 跨页面/模块；
• 多处读写；
• 生命周期比单个组件树更长；
• 需要统一 action/getter/devtools；

才更像 Pinia 场景。

详见 Pinia。

它们不是同一抽象层级

props/emit
→ component API

slot
→ composition API

provide/inject
→ tree-scoped context

Pinia
→ application state ownership

因此不能简单做一个“性能/功能谁最强”的横向排名。

学习检查

1. props/emit、slot、provide/inject、Pinia 分别解决哪类不同问题？
2. 为什么 slot 不应该被理解成“比 props 更高级的传值方式”？
3. defineModel 与 props/emit 的底层关系是什么？
4. provide/inject 与 Pinia 的 scope 有什么差异？
5. 给一个组件树，先标出通信语义，再跳到 selection 笔记完成方案选择。