Vue的核心是組件化，一個(gè)Vue應(yīng)用由一個(gè)個(gè)組件組成。這些組件之間需要相互通信，例如父組件調(diào)用子組件的方法，子組件向父組件傳遞數(shù)據(jù)等。這些情況都可以通過Vuex進(jìn)行處理，但是Vuex適用于大型應(yīng)用，對于小型應(yīng)用來說，用Vuex可能過于臃腫。這時(shí)，Vue的官方文檔中給出了一個(gè)解決方案——Vue Bus。

// 創(chuàng)建bus.js文件
import Vue from 'vue'
export default new Vue()

在Vue Bus的實(shí)現(xiàn)中，我們需要先導(dǎo)入Vue，并以Vue的實(shí)例作為Bus的實(shí)例。一般情況下，我們會創(chuàng)建一個(gè)文件bus.js，這個(gè)文件中創(chuàng)建一個(gè)Vue實(shí)例并導(dǎo)出。

// 在發(fā)送方組件中
import Bus from '@/bus'
export default {
methods: {
sendMessage () {
const message = 'Hello Vue Bus!'
Bus.$emit('send-message', message)
}
}
}

當(dāng)我們需要在組件之間傳遞數(shù)據(jù)時(shí)，我們需要在發(fā)送方組件中觸發(fā)事件，Bus作為事件總線，會在其中尋找與事件名匹配的方法，并傳遞數(shù)據(jù)。在發(fā)送方組件中，我們需要先導(dǎo)入Bus。sendMessage()方法向Bus中發(fā)送send-message事件，并攜帶數(shù)據(jù)。

// 在接收方組件中
import Bus from '@/bus'
export default {
mounted () {
Bus.$on('send-message', this.receiveMessage)
},
methods: {
receiveMessage (message) {
console.log(message)
}
}
}

在接收方組件中，我們需要通過Bus.$on()方法監(jiān)聽事件。在這個(gè)例子中，我們監(jiān)聽的事件是send-message事件，當(dāng)該事件被觸發(fā)時(shí)，我們將會調(diào)用receiveMessage()方法，其中message參數(shù)就是發(fā)送方傳遞的數(shù)據(jù)。

總的來說，Vue Bus可以很方便的在小型應(yīng)用中進(jìn)行組件通信。當(dāng)然，在大型應(yīng)用中，依然推薦使用Vuex進(jìn)行狀態(tài)管理。