【学Vue就跟玩一样】组件的自定义事件和全局事件总线

在Vue中，组件可以使用自定义事件来进行父子组件或兄弟组件之间的通信。这可以通过$emit方法来触发事件，而父组件可以通过监听子组件的事件来响应这些变化。

另一种方法是使用Vue的事件总线（Event Bus），创建一个全局事件总线，然后通过它来进行跨组件的事件通信。

以下是使用自定义事件和事件总线的示例代码：

使用自定义事件：

父组件：

<template>
  <ChildComponent @child-event="parentMethod" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      console.log('Event received in parent');
    }
  }
}
</script>

子组件：

<template>
  <button @click="emitEvent">Emit Event</button>
</template>
 
<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('child-event');
    }
  }
}
</script>

使用事件总线：

首先，创建一个事件总线：

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

组件A（发射事件）：

<template>
  <button @click="emitGlobalEvent">Emit Global Event</button>
</template>
 
<script>
import { EventBus } from './event-bus.js';
 
export default {
  methods: {
    emitGlobalEvent() {
      EventBus.$emit('global-event');
    }
  }
}
</script>

组件B（监听事件）：

<template>
  <div>Waiting for global event...</div>
</template>
 
<script>
import { EventBus } from './event-bus.js';
 
export default {
  created() {
    EventBus.$on('global-event', this.handleGlobalEvent);
  },
  beforeDestroy() {
    EventBus.$off('global-event', this.handleGlobalEvent);
  },
  methods: {
    handleGlobalEvent() {
      console.log('Global event received');
    }
  }
}
</script>

在这两种方法中，我们都展示了如何在Vue组件中触发和监听事件。使用自定义事件适合父子组件通信，而事件总线适合没有父子关系的组件或者跨多个组件的通信。