Vue中事件总线(eventBus)的深入详解及使用

在Vue的开发中，事件总线(eventBus)是非常常用的技术手段，可以方便地实现组件之间的通信以及非父子组件之间的通信。本篇文章将基于Vue 2.x版本，介绍如何使用事件总线及其原理解析。

什么是事件总线

事件总线是一种在Vue中非常常用的技术手段，它是通过Vue实例作为中央事件总线，来实现组件之间的通信。

如何实现事件总线

在Vue中，通过创建一个新的Vue实例作为事件总线，来实现事件总线的功能。

具体实现过程如下：

// 创建 EventBus 实例
var EventBus = new Vue();

// 在组件A中触发事件
EventBus.$emit('event-name', eventData);

// 在组件B中监听事件
EventBus.$on('event-name', function(eventData) {
  // 处理事件
});

事件总线的应用场景

事件总线在Vue中的应用场景比较多，以下是一些常见的应用场景：

1. 父子组件之间的通信。可以通过事件总线在父子组件之间传递数据。

2. 非父子组件之间的通信。可以通过事件总线在非父子组件之间传递数据。

事件总线的示例

下面通过两个示例介绍事件总线的使用。

示例一：父子组件之间的通信

在这个示例中，我们将通过事件总线在父子组件之间传递数据。

1. 首先，在父组件（Parent.vue）中，我们需要创建一个事件总线实例，并将该实例挂载到Vue实例中。

<template>
  <div>
    ...
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    Vue.prototype.$eventBus = new Vue();
  }
}
</script>

1. 在父组件中，我们通过$eventBus实例的$emit方法触发一个事件，并将数据一起发送出去。

<script>
export default {
  methods: {
    handleClick() {
      this.$eventBus.$emit('message', this.message);
    }
  }
}
</script>

1. 在子组件（Child.vue）中，我们通过$eventBus实例的$on方法来监听事件，并处理发送过来的数据。

<template>
  <div>
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$eventBus.$on('message', (data) => {
      this.message = data;
    })
  }
}
</script>

示例二：非父子组件之间的通信

在这个示例中，我们将通过事件总线在非父子组件之间传递数据。

1. 首先，我们需要创建一个事件总线实例，并将该实例挂载到Vue实例中。

import Vue from 'vue';

export const EventBus = new Vue();

1. 在组件A（ComponentA.vue）中，我们通过EventBus实例的$emit方法触发一个事件，并将数据一起发送出去。

<script>
import { EventBus } from '@/event-bus';

export default {
  methods: {
    handleClick() {
      EventBus.$emit('message', 'Hello World!');
    }
  }
}
</script>

1. 在组件B（ComponentB.vue）中，我们通过EventBus实例的$on方法来监听事件，并处理发送过来的数据。

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
import { EventBus } from '@/event-bus';

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    EventBus.$on('message', (data) => {
      this.message = data;
    })
  }
}
</script>

通过以上的两个示例，我们可以看到，事件总线是非常方便的一种通信方式，在Vue中应用非常广泛。