Vue.js组合式API的组件通信围绕“逻辑聚合”和“类型安全”升级：props需defineProps显式声明并支持TS推导，emit需defineEmits约束事件类型，provide/inject更可控，composable和Pinia成跨组件状态管理主流方案。
Vue.js 组件通信机制在组合式 API 中不是简单替换，而是围绕“逻辑聚合”和“类型安全”做了结构性升级。父传子、子传父、跨层级通信的底层逻辑没变，但写法更聚焦功能边界、约束更明确、复用更自然。
父组件 → 子组件：props 声明更严格，响应式绑定更直观
子组件必须显式用 defineProps 声明接收的属性，支持运行时校验和 TypeScript 类型推导。不再允许隐式访问或随意解构 props（解构会丢失响应性）。
- 简单值传递直接写
<Son title="首页">，子组件用defineProps<{ title: string }>() - 对象批量传递用
v-bind="config"，子组件 props 类型需匹配结构 - 响应式数据（如
ref或reactive）通过:xxx="data"传入，子组件接收到的是响应式代理，可直接监听变化
子组件 → 父组件：事件驱动更语义化，emit 类型可约束
子组件调用 defineEmits 显式声明可触发的事件名及参数类型，父组件绑定 @update:xxx 或自定义事件时，IDE 和 TypeScript 能提供完整提示与校验。
- 推荐使用
update:xxx惯例配合v-model，例如<Input v-model:value="inputVal"> - 普通事件如
click、submit仍可用，但建议统一命名风格（如全小写 + 连字符） - 子组件内部调用
emit('change', newValue)，父组件用@change="handleChange"接收
兄弟/跨层级通信：provide/inject 更轻量，useXXX Hook 成主流方案
Options API 中依赖 mixins 或事件总线的松散模式，在组合式 API 中被更可控的方式替代：
立即学习“前端免费学习笔记（深入）”；
-
provide/inject 支持响应式数据注入，且可结合
readonly防止意外修改 - 状态逻辑被封装成独立的 composable（如
useUserStore、useModal），多个组件导入同一函数即可共享状态与方法 - 对于全局状态，Pinia 已深度集成组合式 API，
defineStore返回的 store 可直接在 setup 中使用，无需 map 辅助函数
通信时机与生命周期更清晰，避免“更新错位”
组合式 API 的生命周期钩子（如 onMounted、onUpdated）天然绑定到当前组件作用域，父子组件更新顺序仍遵循“父 beforeUpdate → 子 beforeUpdate → 子 updated → 父 updated”，但开发者可通过 watch 或 watchEffect 精确控制响应节奏。
- 监听 props 变化推荐用
watch(() => props.id, ...)，避免直接 watch props 对象（可能因 Proxy 代理导致误触发） - 需要在子组件挂载后通知父组件，可在
onMounted中触发事件，而非依赖nextTick手动调度 - 异步通信（如 API 返回后更新父状态）保持单向流，子组件不直接修改父数据，而是 emit 后由父组件决定如何更新
