有時(shí)候兩個(gè)組件也需要通信(非父子關(guān)系)恼布。當(dāng)然Vue2.0提供了Vuex耳贬,但在簡(jiǎn)單的場(chǎng)景下,可以使用一個(gè)空的Vue實(shí)例作為中央事件總線醋旦。
- 實(shí)際運(yùn)用的時(shí)候一般把bus抽離出來(lái)恒水;Bus.js
import Vue from 'vue'
const Bus = new Vue();
export default Bus;
- 組件調(diào)用時(shí)引入
- 組件1
import Bus from './Bus';
......
methods: {
....
Bus.$emit('fn', param)
}
- 組件2
import Bus from './Bus';
......
methods: {
....
Bus.$on('fn', item => {
....
})
}
- 也可以直接將Bus注入到Vue根對(duì)象中
import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
el:'#app',
data:{
Bus
}
})
// 在子組件中通過(guò)this.$root.Bus.$on(); this.$root.Bus.$emit()來(lái)調(diào)用