Vue项目中如何处理组件之间的各种通信？

父子组件利用props通信：

复制代码js
// 父组件
<son :msg="message"></son>

// 子组件
props: {
  msg: String 
}
1
2
3
4
5
6
7
8

父子组件利用ref通信：

复制代码js
// 父组件
<son ref="son"></son>

// 通过ref访问子组件实例
this.$refs.son.doSomething()
1
2
3
4
5
6

父子组件利用emit通信：

复制代码js
// 子组件 
this.$emit('someEvent', data)

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

methods: {
  doSomething(data) { ... }  
}
1
2
3
4
5
6
7
8
9
10

利用 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) => { ... })
1
2
3
4
5
6
7
8
9
10
11

利用provide/inject实现祖代后代组件通信：

复制代码js
// 祖先组件
provide: {
  name: 'blue'  
}

// 后代组件 
inject: ['name']
1
2
3
4
5
6
7
8