Vue组件事件：$emit与Event Bus($on)实战解析

"本文主要介绍在Vue.js中，组件之间的事件触发($emit)以及如何使用Event Bus($on)实现跨组件通信。这两种方法在处理组件间交互时非常常见，特别是当需要传递信息或触发功能时。" 在Vue.js中，组件间的通信是一个核心概念。 `$emit` 是Vue组件内置的一种事件触发机制，主要用于父子组件之间的通信。当子组件需要通知父组件某些状态改变或执行特定操作时，可以使用`$emit`。下面是如何使用`$emit`的步骤： 1. 在子组件中定义一个事件处理方法，例如： ```javascript cancelCU() { this.dialogVisible = false; this.$emit('closeAdd'); } ``` 这里，`cancelCU` 方法被调用时，会触发一个名为 `'closeAdd'` 的自定义事件。 2. 在父组件模板中，将该事件绑定到子组件上，同时定义对应的处理函数： ```html <child-component @closeAdd="closeAddClick"></child-component> ``` 父组件中定义的 `closeAddClick` 函数会被调用，当子组件触发 `'closeAdd'` 事件时。 然而，当需要孙子组件与祖父组件之间通信，或者非层级关系的组件间通信时，`$emit` 就显得力不从心了。这时，我们可以利用Event Bus（事件总线）实现跨组件通信。 Event Bus 是一个简单的Vue实例，用于在没有直接父子关系的组件之间共享事件。以下是如何设置和使用Event Bus的步骤： 1. 首先，创建一个名为 `bus.js` 的新文件，初始化一个新的Vue实例： ```javascript import Vue from 'vue'; export default new Vue(); ``` 2. 在需要发送事件的组件中，导入Event Bus，并在其方法中触发事件： ```javascript import Bus from 'common/js/bus.js'; addCart(event) { Bus.$emit('getTarget', event.target); } ``` 这里，`addCart` 方法触发 `'getTarget'` 事件，可选择性地传递参数。 3. 在接收事件的组件中，同样导入Event Bus，并在合适的生命周期钩子（如 `created` 或 `mounted`）中监听事件： ```javascript import Bus from 'common/js/bus.js'; created() { Bus.$on('getTarget', target => { // 处理接收到的事件和参数 }); } ``` 当 `'getTarget'` 事件被触发时，提供的回调函数会被调用，从而处理事件。 总结来说，Vue的`$emit` 主要用于父子组件间的通信，而Event Bus则可以解决非父子组件间的通信问题。合理运用这两种方法，能够使组件间的交互更加灵活，提高代码的可复用性和模块化程度。在实际开发中，理解并熟练掌握这两种通信方式，对于构建复杂且可维护的Vue应用至关重要。