Vue2.x中的组件通信方式详解

# 一、介绍

## 1.1 Vue.js框架简介

Vue.js是一套用于构建用户界面的渐进式JavaScript框架，它的核心库只关注视图层，非常容易学习和上手。Vue.js采用了自身独有的响应式概念，通过使用简单的模板语法，结合数据绑定和组件系统，能够快速地构建交互丰富的单页面应用和动态网页。

## 1.2 组件通信的重要性及作用

在Vue.js中，组件是构成应用的基本单元，而组件间的通信则是非常重要的。各个组件之间的通信能够帮助我们实现数据共享、状态管理、事件传递等功能，是构建复杂应用的重要基础。

## 1.3 目录概览

### 二、父子组件通信

### 三、兄弟组件通信

在Vue.js应用程序中，兄弟组件通信指的是两个没有直接父子关系的组件之间进行通信的场景。通常情况下，兄弟组件之间无法直接通信，因为它们没有直接的父子关系，但是我们可以通过一些方法来实现它们之间的通信。

#### 3.1 使用共同的父组件作为中介

如果两个组件有共同的父组件，我们可以通过父组件作为中介来实现兄弟组件的通信。具体做法是，在父组件中监听一个组件的事件，然后在触发该事件时，将数据传递给另一个组件。

// Parent.vue
<template>
  <div>
    <ChildA @send-data="transferData" />
    <ChildB :receivedData="dataToTransfer" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataToTransfer: ''
    };
  },
  methods: {
    transferData(data) {
      this.dataToTransfer = data;
    }
  }
};
</script>

// ChildA.vue
<template>
  <div>
    <button @click="sendDataToSibling">Send Data to Sibling</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToSibling() {
      this.$emit('send-data', 'Data from Child A');
    }
  }
};
</script>

// ChildB.vue
<template>
  <div>
    <p>Data received from sibling: {{ receivedData }}</p>
  </div>
</template>

<script>
export default {
  props: {
    receivedData: String
  }
};
</script>

在上面的示例中，`ChildA`组件通过`$emit`方法向父组件发送数据，父组件监听`send-data`事件，并将接收到的数据传递给`ChildB`组件。通过共同的父组件作为中介，实现了兄弟组件之间的通信。

#### 3.2 Event Bus（事件总线）

另一种实现兄弟组件通信的方式是使用Vue.js的事件总线。事件总线是一个空的Vue实例，可以用作中央事件总线，用于触发和监听事件以及进行数据传递。

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// ChildA.vue
<template>
  <div>
    <button @click="sendDataToSibling">Send Data to Sibling</button>
  </div>
</template>

<script>
import { EventBus } from './event-bus';
export default {
  methods: {
    sendDataToSibling() {