Vue组件通信的核心是明确状态所有权与单向数据流：Props Down, Events Up为默认模式；共用状态需提升至共同父级；v-model本质是语法糖；子组件内部状态应就地封装。

Vue 组件通信的核心目标不是“能传过去”，而是“谁该拥有状态、数据往哪走、变更从哪来”都一目了然。保持数据流清晰可控，关键在于守住单向性、明确所有权、避免隐式依赖。

Props Down, Events Up：90% 场景的默认选择

这是 Vue 官方推荐且最易维护的数据流向——父组件通过 props 向下传值，子组件通过 emit 向上发通知。

• 父组件负责管理可变状态（如表单数据、列表项），子组件只接收、展示、触发行为
• 子组件不直接修改 props；需要更新时调用 emit('update:xxx', newValue)，由父组件决定是否响应
• 配合 TypeScript 接口定义 props 类型，或使用 defineProps<{ name: string; age?: number }>()，类型安全更直观

状态提升：多个组件共用同一份数据时的解法

当两个或多个子组件需要读写相同状态（比如筛选条件、选中项、编辑模式），不要各自维护一份副本。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 把状态提到它们共同的父组件（或更高层）中管理
• 用 props 分发状态，用事件同步变更意图，确保所有组件看到的是同一份响应式数据
• 避免出现“A 组件改了但 B 组件没刷新”或“两边同时改导致冲突”的情况

v-model 是语法糖，不是双向绑定魔法

v-model 本质仍是 Props + Events 的封装，只是自动映射为 modelValue 和 update:modelValue。

立即学习“前端免费学习笔记（深入）”；

• 自定义组件支持 v-model 时，需显式声明 props.modelValue 和 emit('update:modelValue')
• 需要绑定多个字段时（如 v-model:title、v-model:content），用 v-model:[arg] 语法，对应 emit('update:arg')
• 不建议在非表单类组件中滥用 v-model，容易模糊数据归属

内部状态就地封装，别让父组件操心

子组件自己用的状态，比如按钮 loading 状态、折叠面板展开/收起、输入框聚焦态，应该完全由子组件内部管理。

• 用 ref 或 reactive 在 setup 中定义，不通过 props 传入也不向外 emit
• 这类状态不具备跨组件共享意义，暴露出去反而增加耦合和理解成本
• 组件因此更自治、更易复用——拖到任何父组件里都能独立运行