在Vue.js中，兄弟組件通信是指兩個沒有直接父子關系的組件之間如何進行數據傳遞和通信。為了實現兄弟組件通信，我們可以借助Vue的一些特性，如Event Bus和Provide/Inject。讓我們一起來深入了解這些方法，并通過實例來看看如何實現兄弟組件通信。

Event Bus：事件總線

Event Bus是一個空的Vue實例，用于組件之間的事件通信。我們可以在該實例上觸發和監聽事件，從而實現兄弟組件之間的通信。

創建事件總線

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

兄弟組件A：發送事件

<template><button @click="sendData">發送數據到B組件</button>
</template><script>
import { EventBus } from './EventBus';export default {methods: {sendData() {EventBus.$emit('data-sent', 'Hello from A!');}}
};
</script>

兄弟組件B：接收事件

<template><div><p>從A組件接收到的數據：{{ receivedData }}</p></div>
</template><script>
import { EventBus } from './EventBus';export default {data() {return {receivedData: ''};},created() {EventBus.$on('data-sent', data => {this.receivedData = data;});}
};
</script>

Provide/Inject：提供與注入

Provide/Inject是一種高級的組件通信方式，它允許父組件向子孫組件傳遞數據。

父組件：提供數據

<template><div><ChildA /></div>
</template><script>
export default {provide: {sharedData: 'Hello from Parent!'}
};
</script>

子組件A：注入數據

<template><div><p>從父組件注入的數據：{{ sharedData }}</p></div>
</template><script>
export default {inject: ['sharedData']
};
</script>

子組件B：同樣可以注入數據

<template><div><p>從父組件注入的數據：{{ sharedData }}</p></div>
</template><script>
export default {inject: ['sharedData']
};
</script>

兄弟組件通信在Vue.js中可以通過Event Bus和Provide/Inject來實現。Event Bus是一個事件總線，可以讓兄弟組件之間通過觸發和監聽事件進行通信。而Provide/Inject則允許父組件向子孫組件傳遞數據。了解這些通信方式將幫助您在不同場景中更好地進行組件之間的數據傳遞和通信。通過合理地選擇合適的通信方式，您可以更好地構建出結構清晰、邏輯合理的Vue應用程序。