Vue组件通讯中eventbus兄弟组件数据传递的例子

在Vue中，Event Bus（也称为事件总线）是一个常用于组件间通信的模式，特别是当组件之间没有直接的父子关系时。下面是一个使用Event Bus在兄弟组件之间传递数据的简单例子。

首先，你需要创建一个Event Bus实例。这通常是一个Vue实例，但不挂载到任何DOM元素上。

javascript

// event-bus.js

import Vue from 'vue';

export const EventBus = new Vue();

然后，在需要发送数据的组件中，你可以使用$emit方法触发一个自定义事件。

vue

<!-- BrotherComponentA.vue -->

<template>

  <button @click="sendDataToBrother">Send Data to Brother</button>

</template>

<script>

import { EventBus } from './event-bus.js';

export default {

  methods: {

    sendDataToBrother() {

      EventBus.$emit('data-transfer', { message: 'Hello from Brother A!' });

    },

  },

};

</script>

在需要接收数据的组件中，你可以使用$on方法来监听这个自定义事件。

vue

<!-- BrotherComponentB.vue -->

<template>

  <div>Received Data: {{ receivedData }}</div>

</template>

<script>

import { EventBus } from './event-bus.js';

export default {

  data() {

    return {

      receivedData: null,

    };

  },

  created() {

    EventBus.$on('data-transfer', (data) => {

      this.receivedData = data.message;

    });

  },

  beforeDestroy() {

    // 组件销毁前，移除事件监听器，避免内存泄漏

    EventBus.$off('data-transfer');

  },

};

</script>

在这个例子中，当BrotherComponentA的按钮被点击时，它会触发一个名为data-transfer的自定义事件，并传递一个包含消息的对象。然后，BrotherComponentB会监听这个事件，并在事件触发时更新其receivedData数据属性。

注意，在Vue 3中，官方推荐使用provide和inject或者mitt、vuex等库来处理组件间的通信，因为Event Bus可能会导致代码难以维护和理解。但是，对于简单的项目或快速原型，Event Bus仍然是一个简单而有效的解决方案。