Vue组件间通信：$emit与Event Bus实践解析

"本文主要介绍了Vue框架中组件间通信的两种常见方式：$emit和event Bus。通过实例展示了如何使用$emit实现父子组件间的通信，以及如何利用event Bus实现实现跨级或非父子关系组件之间的事件传递。" 在Vue.js中，组件间的通信是应用开发中的关键部分。本文主要探讨了两种通信方式：一是使用内置的`$emit`方法进行父子组件通信，二是通过event Bus实现任意组件间的通信。 首先，我们来看`$emit`的用法。`$emit`主要用于子组件向其父组件发送事件。例如，在子组件中，我们可以定义一个点击事件处理函数，如`cancelCU()`： ```javascript cancelCU() { this.dialogVisible = false; this.$emit('closeAdd'); } ``` 当这个函数被调用时，它会触发一个名为`closeAdd`的自定义事件，并可以传递数据。父组件在模板中引用子组件时，可以监听这个事件并绑定相应的处理函数： ```html <child-component @closeAdd="closeAddClick"></child-component> ``` 在父组件的JavaScript中，定义`closeAddClick`函数以响应子组件的事件： ```javascript methods: { closeAddClick() { // 执行相关操作 } } ``` 然而，当需要孙子组件与祖父组件通信，或者两个没有直接父子关系的组件之间通信时，`$emit`就无法直接胜任了。这时，我们可以使用event Bus（事件总线）来实现跨组件通信。event Bus是一种轻量级的事件系统，基于Vue实例创建。 创建event Bus的步骤如下： 1. 首先，创建一个新的Vue实例，作为事件总线： ```javascript // bus.js 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); } ``` 3. 接收事件的祖父组件（或其他任何组件）中，也需要导入event Bus，并在其生命周期钩子（如`created`）中监听事件： ```javascript import Bus from './common/js/bus.js'; created() { Bus.$on('getTarget', target => { // 在这里处理接收到的事件和数据 }); } ``` 通过这种方式，孙子组件可以向任何其他组件发送事件，而不仅仅是它的父组件。这种方式在组件层级关系复杂时非常有用，但需要注意的是，event Bus可能导致代码之间的耦合性增加，因此在大型项目中可能需要更复杂的通信机制，如Vuex状态管理。 总结来说，Vue组件间的事件通信是通过`$emit`和event Bus实现的。`$emit`适用于父子组件的直接通信，而event Bus则用于解决跨级或非父子关系组件之间的通信问题。理解并熟练掌握这两种通信方式，对于编写高效、可维护的Vue应用至关重要。