Vue 2 组件通信的六种方式

组件化之后，数据在组件之间怎么流动是第一个大问题。按关系分类梳理。

父子通信

父 → 子：props

// 子组件
props: { title: String }
// 父组件
<post-card :title="post.title"></post-card>

props 是单向数据流，子组件不要直接改，要改就通过事件通知父级。

子 → 父：$emit

// 子组件
this.$emit('delete', this.post.id)
// 父组件
<post-card @delete="handleDelete"></post-card>

父直接访问子：$refs

<child ref="child"></child>

this.$refs.child 可调用子组件的方法，但只适合"命令式"场景（如聚焦输入框），不要滥用，数据流会变乱。

兄弟通信：事件总线

// main.js
Vue.prototype.$bus = new Vue()

// 组件 A 发
this.$bus.$emit('refresh', data)
// 组件 B 收
this.$bus.$on('refresh', this.handler)
// 记得 beforeDestroy 里 $off，否则重复绑定和内存泄漏

跨层级通信

provide / inject：祖先组件提供数据，任意深层后代注入接收，缺点是非响应式（传一个对象可曲线解决），适合底层组件库。

Vuex：集中式状态管理，任意组件读写 store.state、通过 commit 修改。项目变大、多个组件共享同一份数据时的标准答案。

选择建议

• 父子优先 props + $emit，最简单清晰
• 偶尔跨层级用 provide/inject 或事件总线
• 共享状态多、关系复杂 → Vuex（Vue 3 时代是 Pinia）