Vue.js如何处理组件之间的通信？

在 Vue.js 中,组件间的通信有以下几种方式:

1. 父子组件 props 通信:
   子组件通过 props 接收父组件的数据,实现父子通信:

js
// 父组件
<son :msg="message"></son>

// 子组件
props: {
  msg: String 
}

2. 子组件通过 emit 触发事件,父组件监听事件处理:

js
// 子组件 
this.$emit('someEvent', data)

// 父组件
<son @someEvent="doSomething"></son>

methods: {
  doSomething(data) { ... }  
}

3. 父子组件通过 ref 获取实例,然后直接调用方法或访问数据:

js
// 父组件
<son ref="son"></son>

// 通过ref访问子组件实例
this.$refs.son.doSomething()

4. 通过 event bus 分发事件完成非父子关系的通信:

js
// bus.js
export default new Vue()

// componentA
import bus from './bus'
bus.$emit('eventName', data)

// componentB 
import bus from './bus' 
bus.$on('eventName', (data) => { ... })

5. provide/inject 实现祖代后代组件通信:

js
// 祖先组件
provide: {
  name: 'blue'  
}

// 后代组件 
inject: ['name'] 

后代组件通过 inject 获取祖先组件提供的数据。