在Vue中，$bus通常是一个事件总线（Event Bus），用于在组件之间进行通信，尤其是在没有直接父子关系的组件之间

在Vue中，$bus通常是一个事件总线（Event Bus），用于在组件之间进行通信，尤其是在没有直接父子关系的组件之间。虽然Vue推荐使用provide和inject或者Vuex进行组件通信，但在某些简单场景下，使用事件总线也是一种可行的解决方案。

使用事件总线（Event Bus）

1. 创建事件总线

首先，创建一个事件总线对象。通常，你可以在main.js或一个单独的文件中创建它。

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

2. 在Vue实例中使用

然后，在创建Vue实例时，将事件总线添加到原型上，使其在所有组件中都可用。

// main.js
import Vue from 'vue';
import App from './App.vue';
import { EventBus } from './event-bus.js';

Vue.prototype.$bus = EventBus;

new Vue({
  render: h => h(App),
}).$mount('#app');

3. 挂载事件

在任何组件中，你可以使用$bus.$on来监听事件。

// ParentComponent.vue
<template>
  <button @click="emitEvent">发射事件</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$bus.$emit('my-event', 'Hello World');
    }
  }
};
</script>

4. 响应事件

在另一个组件中，你可以使用$bus.$on来监听并响应事件。

// ChildComponent.vue
<template>
  <div>
    <p>等待事件...</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$bus.$on('my-event', this.handleEvent);
  },
  methods: {
    handleEvent(message) {
      console.log(message); // 输出: Hello World
    }
  },
  beforeDestroy() {
    // 销毁前移除事件监听
    this.$bus.$off('my-event', this.handleEvent);
  }
};
</script>

5. 移除事件监听

在组件销毁前，使用$bus.$off来移除事件监听，避免内存泄漏。

beforeDestroy() {
  this.$bus.$off('my-event', this.handleEvent);
}

6. 一次性事件监听

如果你只想监听一次事件，可以使用$bus.$once。

// ChildComponent.vue
mounted() {
  this.$bus.$once('my-event', this.handleEvent);
},

注意事项

• 事件总线不是响应式的，所以如果你需要基于事件更新视图，请确保在事件处理函数中使用this.$forceUpdate()或其他响应式的方式。
• 过度使用事件总线可能会使组件之间的关系变得不明显，尽量避免在大型应用中使用。
• 考虑使用Vuex进行状态管理，尤其是在需要跨组件通信的复杂应用中。

通过上述案例，你可以看到如何在Vue中使用$bus进行事件的挂载和响应。这种方法适用于简单的跨组件通信，但在大型应用中，推荐使用更为健壮的状态管理解决方案，如Vuex。