Vue CLI bus 是 Vue CLI 4 中引入的一個新特性，它是一個事件總線，用于在不同組件之間通信。它可以實現非父子組件之間的通信，使代碼更加靈活和可維護。

使用 Vue CLI bus 需要遵循以下步驟：

// main.js
import Vue from 'vue'
export const bus = new Vue()
// ComponentA.vue
import { bus } from '@/main'
export default {
mounted() {
bus.$on('eventName', this.callback)
},
methods: {
callback() {
// 處理事件邏輯
}
}
}
// ComponentB.vue
import { bus } from '@/main'
export default {
methods: {
handleClick() {
bus.$emit('eventName')
}
}
}

這里，我們創建了一個名為 bus 的事件總線，并在 main.js 中導出它。在 ComponentA 中，我們使用 $on 方法監聽 eventName 事件，并在回調函數中處理事件邏輯。而在 ComponentB 中，我們使用 $emit 方法觸發 eventName 事件。

這樣，當 ComponentB 中的 handleClick 方法被觸發時，會觸發 eventName 事件，并執行 ComponentA 中的回調函數，從而實現了不同組件之間的通信。

總之，Vue CLI bus 是 Vue CLI 4 中一個非常有用的特性，它可以幫助我們在不同組件之間實現高效的通信。通過使用它，我們可以更靈活地編寫代碼并提高代碼的可維護性。