在Vue中，兄弟組件之間的通信比較常見。如果兩個組件之間沒有共同的祖先，那么就只能通過非父子關系組件通信的方式。Vue提供了幾種方式使得兄弟組件之間能夠通信。

1. 使用Vue Bus

// 在main.js中
export const bus = new Vue();
// 發送方
import {bus} from "@/main.js";
bus.$emit("eventName", data); // 發送事件
// 接收方
import {bus} from "@/main.js";
bus.$on("eventName", (data) =>{
console.log(data); // 接收數據
});

2. 使用Vuex Store

// 定義Store
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
// 定義state，mutations，actions，getters
const store = new Vuex.Store({
 state: {
count: 0
 },
 mutations: {
increment(state) {
state.count++;
}
 },
 actions: {
incrementAsync(context) {
setTimeout(() =>{
context.commit("increment");
}, 1000);
}
 },
 getters: {
getCount: state =>state.count
 }
});
export default store;
// 發送方
this.$store.commit("increment"); // 發送Mutation
// 接收方
computed: {
count() {
return this.$store.getters.getCount;
}
}

3. 使用Event Bus

// 定義Event Bus
export default new Vue();
// 發送方
import EventBus from "@/event-bus.js";
EventBus.$emit("eventName", data); // 發送事件
// 接收方
import EventBus from "@/event-bus.js";
EventBus.$on("eventName", data =>{
console.log(data); // 接收數據
});

無論使用哪種方式，兄弟組件之間的通信原理都是一樣的。發送方發送事件/狀態，接收方監聽事件/狀態，當發送方觸發事件/狀態時，接收方就會收到事件/狀態。

需要注意的是，在實際開發中，應該盡量避免過多使用兄弟組件之間的通信，因為這會增加代碼的復雜度。盡量讓組件之間的關系簡單清晰，減少通信次數。