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够用就别过早升级

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！