Vue3 组件通信

关联：Vue / Vue3-响应式开发

总原则

• 数据向下流（Props），事件向上抛（Emits）
• 状态的“所有权”清晰：谁负责修改，谁就持有

Props / Emits（最常用）

• 父传子：子组件用 defineProps 接收
• 子传父：子组件用 defineEmits 抛事件，父组件监听

典型用于：表单组件、列表项组件、按钮/工具条组件等。

v-model（Props+Emits 的语法糖）

v-model 本质是：

• modelValue（或自定义字段）作为 Props
• update:modelValue（或自定义字段更新事件）作为 Emits

适合：输入框、选择器、弹窗显隐、受控组件。

Provide / Inject（跨层传递）

用于祖先组件向深层后代提供依赖，减少层层透传。

常见场景：

• 表单上下文、主题配置、全局能力注入

注意：如果提供的是响应式对象，要确保注入后仍保持响应式（避免解构导致丢失）。

Slots（组合与内容分发）

用于“组件结构固定，但内容由使用者决定”的场景：

• 卡片/表格/弹窗等通用容器组件
• 需要让调用方传入局部 UI 的地方

更复杂的状态共享

当组件间共享状态越来越复杂时，通常会引入集中式状态管理（如 Pinia），让通信从“组件关系”转为“状态源”。

资料

• [08 Vue3 核心语法（二）组件通信 讲义（师生共用版・两课时）.pdf](file:///d:/Archives/personal/charley-s-garden-repo/tmp/%E6%9C%BA%E5%99%A8%E4%BA%BA%E4%B8%8E%E6%99%BA%E8%83%BD%E7%B3%BB%E7%BB%9F%E7%BB%BC%E5%90%88%E5%AE%9E%E8%B7%B5/08%20Vue3%20%E6%A0%B8%E5%BF%83%E8%AF%AD%E6%B3%95%EF%BC%88%E4%BA%8C%EF%BC%89%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1%20%E8%AE%B2%E4%B9%89%EF%BC%88%E5%B8%88%E7%94%9F%E5%85%B1%E7%94%A8%E7%89%88%E3%83%BB%E4%B8%A4%E8%AF%BE%E6%97%B6%EF%BC%89.pdf)
• [09 Vue3 核心语法（二）组件通信 讲义（AI 实操强化版・两课时）.pdf](file:///d:/Archives/personal/charley-s-garden-repo/tmp/%E6%9C%BA%E5%99%A8%E4%BA%BA%E4%B8%8E%E6%99%BA%E8%83%BD%E7%B3%BB%E7%BB%9F%E7%BB%BC%E5%90%88%E5%AE%9E%E8%B7%B5/09%20Vue3%20%E6%A0%B8%E5%BF%83%E8%AF%AD%E6%B3%95%EF%BC%88%E4%BA%8C%EF%BC%89%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1%20%E8%AE%B2%E4%B9%89%EF%BC%88AI%20%E5%AE%9E%E6%93%8D%E5%BC%BA%E5%8C%96%E7%89%88%E3%83%BB%E4%B8%A4%E8%AF%BE%E6%97%B6%EF%BC%89.pdf)
  插槽复用 BaseCard 承载设备面板布局
  “ 可配置点用
  slots/props 表
  达 ”
  输入需求，让 AI 输出 “ 高可测试性目录结构 + 目录职责 + 依赖方向 + 命名规范 ” 。
  让 AI 按 “ 文件路径 + 完整代码 ” 输出组件通信示例，避免碎片化粘贴。
  让 AI 按 “ 审计清单 + 修复版代码 ” 交付，训练 Rev

资料

• [09 Vue3 核心语法（二）组件通信 讲义（AI 实操强化版・两课时）.pdf](file:///d:/Archives/personal/charley-s-garden-repo/tmp/%E6%9C%BA%E5%99%A8%E4%BA%BA%E4%B8%8E%E6%99%BA%E8%83%BD%E7%B3%BB%E7%BB%9F%E7%BB%BC%E5%90%88%E5%AE%9E%E8%B7%B5/09%20Vue3%20%E6%A0%B8%E5%BF%83%E8%AF%AD%E6%B3%95%EF%BC%88%E4%BA%8C%EF%BC%89%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1%20%E8%AE%B2%E4%B9%89%EF%BC%88AI%20%E5%AE%9E%E6%93%8D%E5%BC%BA%E5%8C%96%E7%89%88%E3%83%BB%E4%B8%A4%E8%AF%BE%E6%97%B6%EF%BC%89.pdf)