vue2 兄弟组件之间的数据传递

在 Vue 中，你可以使用事件总线（Event Bus）来实现兄弟组件之间的数据传递。以下是一个基本的示例：

1. 创建一个事件总线，通常在你的 Vue 实例外部创建，例如在一个单独的文件中：

// event-bus.js

import Vue from 'vue';
export const eventBus = new Vue();

1. 在发送组件（兄弟组件中的一个）中，使用事件总线发送数据：

// SenderComponent.vue

<template>
  <button @click="sendDataToReceiver">发送数据</button>
</template>

<script>
import { eventBus } from './event-bus.js';

export default {
  methods: {
    sendDataToReceiver() {
      eventBus.$emit('data-sent', '你好，这是来自发送组件的数据！');
    }
  }
}
</script>

1. 在接收组件（兄弟组件中的另一个）中，使用事件总线监听数据：

// ReceiverComponent.vue

<template>
  <div>
    <p>接收到的数据：{{ receivedData }}</p>
  </div>
</template>

<script>
import { eventBus } from './event-bus.js';

export default {
  data() {
    return {
      receivedData: ''
    };
  },
  created() {
    eventBus.$on('data-sent', data => {
      this.receivedData = data;
    });
  }
}
</script>

这个示例中，SenderComponent 发送数据到事件总线，然后 ReceiverComponent 通过监听事件总线上的事件来接收数据。

请注意，事件总线可以用于简单的数据传递，但对于更大型的应用，你可能需要考虑使用状态管理库，如 Vuex，来更好地管理组件之间的状态和数据。