稳定Vue组件通信需按关系选机制：父子用props+defineEmits，跨层级用provide/inject+readonly，兄弟用Pinia；ref和v-model须规范使用。
要实现稳定的 Vue 组件通信链路，关键不是堆砌多种方式，而是根据组件关系、数据性质和更新频率，选择匹配度高、可追踪、低耦合的通信机制。稳定的核心在于单向数据流可控、事件触发可溯源、状态变更可预测。
父子组件：用 props + defineEmits 构建可靠基础
这是最稳定、最易调试的通信路径。Vue 3 的 defineProps 和 defineEmits（配合 TypeScript 更佳）能强制约束输入输出接口，避免运行时类型错误或事件名拼写失误。
- 父组件传值时，对 prop 做类型声明和默认值，复杂对象用工厂函数：
default: () => ({}) - 子组件触发事件必须提前在
defineEmits中声明，例如：const emit = defineEmits(['update:modelValue', 'submit'])，未声明的事件会被 Vue 警告（开发模式下） - 禁止子组件直接修改 prop；如需“双向”效果，统一走
v-model语义（即modelValue+update:modelValue），保持逻辑清晰
跨层级组件：provide/inject 配合 readonly 保障稳定性
适用于祖孙、深层嵌套等场景，比层层透传 props 更健壮，但容易因注入值被意外修改而破坏稳定性。
- 父级 provide 时，对响应式对象使用
readonly()包裹，防止下游组件误改：provide('config', readonly(configRef)) - inject 侧建议搭配默认值和类型断言，避免 undefined 导致运行时错误
- 仅用于共享配置、主题、全局工具函数等只读或行为型数据，不推荐传递可变业务状态
兄弟/无关联组件：优先用 Pinia 替代 EventBus
EventBus（自定义事件总线）虽灵活，但缺乏类型提示、事件名易冲突、难以追踪订阅/发布位置，长期维护风险高。Pinia 是 Vue 官方推荐的状态库，天然支持 TS、模块化、时间旅行调试。
立即学习“前端免费学习笔记（深入）”；
- 将需要共享的状态抽离为独立 store，各组件通过
useXXXStore()订阅和操作 - 对敏感操作（如删除、提交）封装成 store 内的方法，统一做 loading、错误处理和日志记录
- 避免在 store 中直接操作 DOM 或调用非响应式副作用，保持 store 纯净
边界情况：ref 和 v-model 的安全用法
ref 可用于父组件直接调用子组件方法（如表单校验、滚动定位），但属于“强耦合”，应谨慎使用。
- 仅在子组件明确暴露
defineExpose的 API 时才调用，否则 ref 为空 - 避免在父组件中频繁读写子组件内部响应式变量，这会绕过 props/event 流程，破坏数据流向一致性
-
v-model必须严格遵循命名规范：v-model:title对应titleprop 和update:title事件，否则绑定失效
