vue组件通信的核心是明确状态所有权与单向数据流：props down, events up为默认模式；共用状态需提升至共同父级；v-model本质是语法糖；子组件内部状态应就地封装。
Vue 组件通信的核心目标不是“能传过去”，而是“谁该拥有状态、数据往哪走、变更从哪来”都一目了然。保持数据流清晰可控，关键在于守住单向性、明确所有权、避免隐式依赖。
Props Down, Events Up：90% 场景的默认选择
这是 Vue 官方推荐且最易维护的数据流向——父组件通过 props 向下传值，子组件通过 emit 向上发通知。
- 父组件负责管理可变状态（如表单数据、列表项），子组件只接收、展示、触发行为
- 子组件不直接修改 props；需要更新时调用 emit('update:xxx', newValue)，由父组件决定是否响应
- 配合 TypeScript 接口定义 props 类型，或使用 defineProps()，类型安全更直观
状态提升：多个组件共用同一份数据时的解法
当两个或多个子组件需要读写相同状态（比如筛选条件、选中项、编辑模式），不要各自维护一份副本。
- 把状态提到它们共同的父组件（或更高层）中管理
- 用 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
- 这类状态不具备跨组件共享意义，暴露出去反而增加耦合和理解成本
- 组件因此更自治、更易复用——拖到任何父组件里都能独立运行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
