vue$bus（vue部署到服务器 接口调用不了）

## Vue 全局事件总线（$bus）详解### 简介在 Vue.js 应用中，组件间通信是一个常见需求。对于父子组件，我们可以使用 `props` 和 `$emit` 方便地传递数据和事件。但当组件关系复杂，例如跨越多个层级或没有直接关系时，使用 `props` 和 `$emit` 就显得繁琐且难以维护。为了解决这个问题，我们可以借助一种称为“全局事件总线”的模式。`Vue$bus` 就是实现这种模式的一种常见方式，它利用 Vue 实例自身作为中央事件总线，允许任何组件在全局范围内发送和接收事件，从而实现灵活的组件间通信。### 原理`Vue$bus` 的原理非常简单，它利用了 Vue 实例本身就是一个事件发射器的特性。我们创建一个空的 Vue 实例，并将其挂载到 Vue 原型上，使所有组件实例都可以访问它。然后，我们可以使用 `$on`、`$emit` 和 `$off` 方法来监听、触发和移除全局事件。### 实现```javascript // main.js import Vue from 'vue'const app = new Vue({// ...beforeCreate() {Vue.prototype.$bus = new Vue()} }) ```### 使用1.

发送事件:

在任何组件中，使用 `this.$bus.$emit('eventName', payload)` 发送事件，其中 `eventName` 是自定义的事件名称，`payload` 是可选的事件数据。```vue```2.

接收事件:

在需要监听事件的组件中，使用 `this.$bus.$on('eventName', handler)` 注册事件监听器，其中 `handler` 是事件触发时执行的回调函数。```vue```3.

移除事件监听:

为了避免内存泄漏，建议在组件销毁前移除事件监听器，可以使用 `this.$bus.$off('eventName', handler)` 或 `this.$bus.$off()` 移除所有监听器。```vuebeforeDestroy() {this.$bus.$off('message-sent')}```### 优缺点

优点:

简单易用，实现方便。

适用于任何组件间通信场景，特别是跨多层级组件通信。

缺点:

事件命名容易冲突，尤其在大型项目中。

难以追踪事件流，不利于代码维护和调试。

过度依赖全局事件总线可能导致代码耦合度高，降低可读性和可维护性。### 替代方案

Vuex:

对于复杂应用，推荐使用 Vue 官方状态管理库 Vuex，它提供了更结构化和可维护的方式来管理全局状态和组件间通信。

Provide/Inject:

对于跨越多层级的父子组件通信，可以使用 `provide` 和 `inject` 选项，它允许祖先组件向所有后代组件提供数据和方法。

Event Bus with Event Emitter:

可以使用第三方库，如 mitt 或 tiny-emitter，创建更完善的事件总线，提供更丰富的功能和更好的类型支持。### 总结`Vue$bus` 提供了一种简单直接的组件间通信方式，但需要注意其局限性。在实际开发中，应根据项目规模和复杂度选择合适的通信方式。对于大型项目，建议使用更专业的解决方案，例如 Vuex 或 Event Bus with Event Emitter。

Vue 全局事件总线（$bus）详解

简介在 Vue.js 应用中，组件间通信是一个常见需求。对于父子组件，我们可以使用 `props` 和 `$emit` 方便地传递数据和事件。但当组件关系复杂，例如跨越多个层级或没有直接关系时，使用 `props` 和 `$emit` 就显得繁琐且难以维护。为了解决这个问题，我们可以借助一种称为“全局事件总线”的模式。`Vue$bus` 就是实现这种模式的一种常见方式，它利用 Vue 实例自身作为中央事件总线，允许任何组件在全局范围内发送和接收事件，从而实现灵活的组件间通信。

原理`Vue$bus` 的原理非常简单，它利用了 Vue 实例本身就是一个事件发射器的特性。我们创建一个空的 Vue 实例，并将其挂载到 Vue 原型上，使所有组件实例都可以访问它。然后，我们可以使用 `$on`、`$emit` 和 `$off` 方法来监听、触发和移除全局事件。

实现```javascript // main.js import Vue from 'vue'const app = new Vue({// ...beforeCreate() {Vue.prototype.$bus = new Vue()} }) ```

使用1. **发送事件:** 在任何组件中，使用 `this.$bus.$emit('eventName', payload)` 发送事件，其中 `eventName` 是自定义的事件名称，`payload` 是可选的事件数据。```vue```2. **接收事件:** 在需要监听事件的组件中，使用 `this.$bus.$on('eventName', handler)` 注册事件监听器，其中 `handler` 是事件触发时执行的回调函数。```vue```3. **移除事件监听:** 为了避免内存泄漏，建议在组件销毁前移除事件监听器，可以使用 `this.$bus.$off('eventName', handler)` 或 `this.$bus.$off()` 移除所有监听器。```vuebeforeDestroy() {this.$bus.$off('message-sent')}```

优缺点**优点:*** 简单易用，实现方便。 * 适用于任何组件间通信场景，特别是跨多层级组件通信。**缺点:*** 事件命名容易冲突，尤其在大型项目中。 * 难以追踪事件流，不利于代码维护和调试。 * 过度依赖全局事件总线可能导致代码耦合度高，降低可读性和可维护性。

替代方案* **Vuex:** 对于复杂应用，推荐使用 Vue 官方状态管理库 Vuex，它提供了更结构化和可维护的方式来管理全局状态和组件间通信。 * **Provide/Inject:** 对于跨越多层级的父子组件通信，可以使用 `provide` 和 `inject` 选项，它允许祖先组件向所有后代组件提供数据和方法。 * **Event Bus with Event Emitter:** 可以使用第三方库，如 mitt 或 tiny-emitter，创建更完善的事件总线，提供更丰富的功能和更好的类型支持。

总结`Vue$bus` 提供了一种简单直接的组件间通信方式，但需要注意其局限性。在实际开发中，应根据项目规模和复杂度选择合适的通信方式。对于大型项目，建议使用更专业的解决方案，例如 Vuex 或 Event Bus with Event Emitter。