在Vue.js中，EventBus是一种用于组件间通信的方式，特别是在没有父子关系的组件之间。我们可以创建一个空的Vue实例来作为事件总线。
实例：
展示如何使用EventBus实现两个兄弟组件之间的通信。
首先，我们需要创建一个EventBus：
import Vue from 'vue';
export const EventBus = new Vue();接下来，创建两个兄弟组件，并通过EventBus进行通信。假设这两个组件分别是ComponentA.vue和ComponentB.vue。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue EventBus Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<component-a></component-a>
<component-b></component-b>
</div>
<script>
// 创建一个EventBus
const EventBus = new Vue();
// 定义ComponentA
Vue.component('component-a', {
template: `
<div>
<h3>Component A</h3>
<button @click="sendMessage">Send Message to Component B</button>
</div>
`,
methods: {
sendMessage() {
EventBus.$emit('message-from-a', 'Hello from Component A!');
}
}
});
// 定义ComponentB
Vue.component('component-b', {
data() {
return {
message: ''
};
},
template: `
<div>
<h3>Component B</h3>
<p>{{ message }}</p>
</div>
`,
created() {
EventBus.$on('message-from-a', (msg) => {
this.message = msg;
});
}
});
// 初始化Vue实例
new Vue({
el: '#app'
});
</script>
</body>
</html>
说明：
这个例子中，ComponentA有一个按钮，当点击这个按钮时，会触发一个名为message-from-a的事件，并传递一条消息给其他监听该事件的组件。ComponentB在创建时开始监听这个事件，并在其回调函数中更新自己的数据属性message，从而显示从ComponentA接收到的消息。