使用全局事件总线实现任意组件间的通讯_事件总线富组件传到孙-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_57005111/article/details/136347063

本文介绍了如何在Vue2中使用全局事件总线实现在爷孙组件间的通信，通过创建事件总线实例、在爷爷组件监听事件关闭对话框以及在孙组件触发事件。同时提及了全局事件总线在兄弟组件间的数据共享功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文以vue2中爷孙组件通讯为例，需求是点击孙组件的按钮，实现关闭爷组件的弹窗。

全局事件总线是通过Vue实例的事件系统来实现组件之间的通讯，可以方便地在任何组件中进行事件的触发和监听。

以下是使用全局事件总线实现爷孙组件通讯的步骤：

创建一个新的Vue实例作为全局事件总线，可以将其定义在一个单独的文件中，例如event-bus.js：
```
// event-bus.js

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

2.在爷爷组件中使用EventBus.$on监听事件，并在事件处理函数中关闭对话框：

// Grandparent.vue

<template>
  <div>
    <Dialog :visible="dialogVisible"></Dialog>
  </div>
</template>

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

export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  created() {
    EventBus.$on('closeDialog', () => {
      this.dialogVisible = false;
    });
  }
};
</script>

3. 在孙组件中使用EventBus.$emit（）触发事件：

// Grandchild.vue

<template>
  <div>
    <button @click="closeDialog">Close Dialog</button>
  </div>
</template>

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

export default {
  methods: {
    closeDialog() {
      EventBus.$emit('closeDialog');
    }
  }
};
</script>

通过以上步骤，可以使用全局事件总线实现爷孙组件之间的通讯。当孙组件中的按钮被点击时，会触发closeDialog事件，爷爷组件会监听到该事件并关闭对话框。

兄弟组件之间也可以使用全局事件总线实现数据共享；