01 前端必学：Vue2 组件间8种通信方式详解

组件通信是Vue开发的核心知识，本文用生活化比喻+真实案例，带你快速掌握8种通信方式的使用场景和实现方法。

一、父子组件通信（快递收发模式）

1. Props（父传子快递）

适用场景：父组件向子组件传递数据

export default {
  data() {
    return { parentMsg: '来自爸爸的爱' }
  }
}



export default {
  props: ['message'],
  mounted() {
    console.log(this.message) // 输出：来自爸爸的爱
  }
}

2. $emit（子传父电话）

适用场景：子组件向父组件传递数据

呼叫父组件

export default {
  methods: {
    sendMsg() {
      this.$emit('child-event', '爸爸我饿了')
    }
  }
}




export default {
  methods: {
    handleEvent(msg) {
      console.log(msg) // 输出：爸爸我饿了
    }
  }
}

二、兄弟组件通信（广播站模式）

3. EventBus（中央广播站）

适用场景：任意组件间通信

// 创建广播站
const EventBus = new Vue()
// 组件A发广播
EventBus.$emit('update', '全体注意！')
// 组件B收广播
EventBus.$on('update', msg => {
  console.log(msg) // 输出：全体注意！
})

三、跨级组件通信（家族遗传模式）

4. a t t r s / attrs/ attrs/listeners（基因继承）

适用场景：跨级传递属性和事件

export default {
  mounted() {
    console.log(this.$attrs.name) // 输出：爷爷
    this.$emit('shout') // 触发祖先事件
  }
}

5. Provide/Inject（家族信托）

适用场景：深层嵌套组件传值

// 祖先组件设立信托
export default {
  provide() {
    return { familyName: '张氏家族' }
  }
}
// 后代组件领取信托
export default {
  inject: ['familyName'],
  mounted() {
    console.log(this.familyName) // 输出：张氏家族
  }
}

四、快捷访问（家庭直呼）

6. p a r e n t / parent/ parent/children（家庭群聊）

// 子组件中
this.$parent.parentMethod()
// 父组件中
this.$children[0].childMethod()

7. $refs（点名呼叫）

export default {
  mounted() {
    this.$refs.child.doSomething()
  }
}

五、全局状态管理（中央仓库）

8. Vuex（中央仓库）

文件结构：

store/
   ├── index.js      # 主仓库
   ├── actions.js    # 异步操作
   ├── mutations.js  # 同步修改
   └── getters.js    # 计算属性

典型使用：

// 组件中获取数据
computed: {
  count() {
    return this.$store.state.count
  }
}
// 修改数据
this.$store.commit('increment', 10)
// 异步操作
this.$store.dispatch('asyncIncrement')

六、通信方式选型指南

小贴士：简单场景用Props，复杂场景用Vuex，紧急需求用EventBus，跨级传递用Provide

理解这些通信方式后，你可以像搭积木一样灵活组合Vue组件。记住：没有最好的方式，只有最合适的方式！