Vue组件通信只需掌握5种常用方案：1.父子直连（props+$emit）；2.跨级透传（$attrs+$listeners）；3.祖孙注入（provide/inject）；4.任意广播（EventBus）；5.集中管理（Vuex/Pinia），按场景渐进选用。
Vue组件通信本质是解决“数据怎么从一个地方到另一个地方”的问题。新手不用一上来就学全，先掌握5种最常用、有明确适用边界的方案就够了——选对了不踩坑，选错了后期改起来头疼。
父子直连：props + $emit
这是Vue通信的起点，像打电话一样点对点。父组件把数据当参数传下去，子组件干完活再通过事件把结果喊回来。
- 父传子：用
:msg="parentMsg"绑定，子组件用props: ['msg']接收 - 子传父：子组件调
this.$emit('update', newValue)，父组件用@update="handleUpdate"监听 - 适合场景：表单输入框、按钮点击反馈、弹窗确认回调等简单交互
- 注意：不能跨层，比如爷爷→孙子要靠中间组件中转，写多了会累
跨级透传：$attrs + $listeners
当组件嵌套深（比如 A → B → C），又不想在中间层B手动转发props和事件时，它就是“快递直送员”。
-
$attrs自动收集父组件传给B但B没声明为prop的属性（如class、id除外） -
$listeners自动收集父组件绑定在B上的事件（不含.native） - B组件只需
v-bind="$attrs"和v-on="$listeners"，就能把所有未消化的内容原样传给C - 常配合
inheritAttrs: false使用，避免属性意外挂到根元素上
祖孙注入：provide / inject
适用于“一份配置全局生效”的场景，比如主题色、API基地址、国际化语言包。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 祖先组件用
provide()返回一个对象，里面放要共享的数据或方法 - 任意深层子孙组件用
inject: ['themeColor']直接取用，无需逐层传递 - 响应式需注意：provide的对象如果是响应式数据（如
reactive或ref），注入后仍保持响应；普通对象则不会自动更新 - 不推荐用于频繁变动的状态，它更像“环境变量”，不是状态管理工具
任意组件广播：EventBus（事件总线）
用一个空的Vue实例当“广播站”，谁想发消息就$emit，谁想收就$on，兄弟、隔代、无关组件都能通。
- 创建：
export const EventBus = new Vue() - 发送：
EventBus.$emit('user-login', userInfo) - 接收：
EventBus.$on('user-login', cb) - 关键提醒：必须在组件销毁前手动
EventBus.$off('user-login')，否则内存泄漏、重复触发 - 适合小项目快速联动，大型项目建议逐步迁移到Vuex或Pinia
集中状态管理：Vuex（或 Pinia）
当多个组件频繁读写同一份数据（如购物车数量、用户登录态），且逻辑开始变复杂时，就该请出“中央仓库”了。
- 所有状态存于
store.state，统一修改走commit mutation（同步）或dispatch action（异步） - 组件通过
mapState/mapGetters读，mapMutations/mapActions写，解耦清晰 - 优势是可追溯、易调试、支持插件（如时间旅行）、团队协作友好
- 新手别一上来就用——小页面加Vuex反而增加负担，先用
props/$emit够用就别过早升级
