学习Vue：Event Bus 与 Provide/Inject

在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应用程序。