EventBus（$emit / $on）适⽤于⽗⼦、隔代、兄弟组件通信的例子

EventBus在Vue.js中是一个用于实现组件间通信的机制，特别适用于跨组件（父子、隔代、兄弟等）的事件传递。以下是使用在不同组件间通信的例子：

父子组件通信

在Vue中，父子组件间的通信通常通过props和events实现。然而，EventBus也可以作为一种替代方案。

在main.js或全局文件中创建EventBus

javascript

import Vue from 'vue';

export const EventBus = new Vue();

子组件触发事件

在子组件中，当某个事件发生时，使用EventBus.$emit发送事件和数据。

javascript

methods: {

  childMethod() {

    // 发送事件和数据

    EventBus.$emit('child-event', '这是从子组件发送的数据');

  }

}

父组件监听事件

在父组件中，使用EventBus.$on监听子组件发送的事件，并在回调函数中处理数据。

javascript

created() {

  // 监听子组件的事件

  EventBus.$on('child-event', (data) => {

    console.log(data); // 输出：这是从子组件发送的数据

  });

},

beforeDestroy() {

  // 组件销毁前，解绑事件监听

  EventBus.$off('child-event');

}

隔代组件通信

隔代组件（如祖孙组件）间的通信可以通过EventBus轻松实现。

在孙子组件中触发事件

javascript

methods: {

  grandchildMethod() {

    // 发送事件和数据

    EventBus.$emit('grandchild-event', '这是从孙子组件发送的数据');

  }

}

在爷爷组件中监听事件

javascript

created() {

  // 监听孙子组件的事件

  EventBus.$on('grandchild-event', (data) => {

    console.log(data); // 输出：这是从孙子组件发送的数据

  });

},

beforeDestroy() {

  // 组件销毁前，解绑事件监听

  EventBus.$off('grandchild-event');

}

兄弟组件通信

兄弟组件间的通信通常需要一个共享的父组件来转发事件，但EventBus可以简化这一流程。

在兄弟组件A中触发事件

javascript

methods: {

  brotherAMethod() {

    // 发送事件和数据

    EventBus.$emit('brother-a-event', '这是从兄弟组件A发送的数据');

  }

}

在兄弟组件B中监听事件

javascript

created() {

  // 监听兄弟组件A的事件

  EventBus.$on('brother-a-event', (data) => {

    console.log(data); // 输出：这是从兄弟组件A发送的数据

  });

},

beforeDestroy() {

  // 组件销毁前，解绑事件监听

  EventBus.$off('brother-a-event');

}

注意事项：

使用EventBus时要确保在组件销毁前解绑事件监听，避免内存泄漏。

EventBus作为全局对象，可能导致代码难以维护和调试，应谨慎使用。

对于简单的父子组件通信，推荐使用Vue的props和events；对于复杂的跨组件通信，可以考虑使用Vuex等状态管理库。