vue2如何实现兄弟组件传值

组件之间的通讯是项目中比较常见的技术技巧，在 Vue 2 中，可以通过事件总线（Event Bus）来实现兄弟组件之间的数据传递。以下是一个示例，演示了兄弟组件之间的数据传递过程:

// EventBus.js
// 创建一个事件总线实例，用于兄弟组件之间的通信
import Vue from 'vue';
export default new Vue();

// BrotherA.vue
<template>
  <div>
    <button @click="sendDataToBrotherB">Send Data to Brother B</button>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  methods: {
    sendDataToBrotherB() {
      const data = 'Data from Brother A!';
      // 通过事件总线触发名为 'dataEvent' 的事件，并传递数据给 BrotherB 组件
      EventBus.$emit('dataEvent', data);
    },
  },
};
</script>

// BrotherB.vue
<template>
  <div>
    <p>{{ receivedData }}</p>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  data() {
    return {
      receivedData: '',
    };
  },
  created() {
    // 监听名为 'dataEvent' 的事件，接收 BrotherA 组件传递的数据
    EventBus.$on('dataEvent', (data) => {
      this.receivedData = data;
    });
  },
};
</script>

上述代码中，我们通过创建一个事件总线实例（EventBus），用于兄弟组件之间的通信。在 BrotherA.vue 组件中，当点击按钮时，通过事件总线触发名为 'dataEvent' 的事件，并传递数据给 BrotherB.vue 组件。

在 BrotherB.vue 组件中，我们在 created 钩子中监听名为 'dataEvent' 的事件，一旦接收到数据，就将其赋值给 receivedData 数据属性。

这样，兄弟组件之间就实现了数据的传递，希望可以帮助到大家