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

"这篇教程介绍了Vue.js中组件之间的事件触发机制，主要讲解了$emit的使用以及如何通过event Bus($on)实现跨组件通信。在实际项目中，当需要组件间进行复杂的数据交互时，这些技术是至关重要的。" Vue.js的组件通信是其核心特性之一，它允许开发者构建复杂的UI结构。在这个场景中，我们有新增按钮组件和操作按钮组合组件，它们都需要在改变列表数据后实时更新列表。Vue提供了两种主要的方式来实现这一目标：父子组件间的事件触发($emit)和跨组件通信的event Bus($on)。 1. **$emit的使用**： - 在子组件中，当某个事件发生（如点击按钮），可以使用`this.$emit`来触发一个自定义事件。例如，在子组件中定义一个`cancelCU`方法： ```javascript cancelCU() { this.dialogVisible = false; this.$emit('closeAdd'); } ``` - 在父组件模板中，通过在子组件上监听`@closeAdd`事件，可以指定一个处理函数，如`closeAddClick`： ```html <child-component @closeAdd="closeAddClick" /> ``` 父组件中定义`closeAddClick`来处理子组件传来的事件。 2. **跨组件通信：event Bus**： 当需要孙子组件触发父组件，甚至更高层级组件的事件时，直接使用$emit可能变得复杂。这时，我们可以利用event Bus（事件总线）来实现跨组件通信。 - 首先，创建一个全局的event Bus实例，如`bus.js`： ```javascript import Vue from 'vue'; export default new Vue(); ``` - 然后，在需要发送事件的孙子组件中引入并使用`Bus`： ```javascript import Bus from 'common/js/bus.js'; addCart(event) { Bus.$emit('getTarget', event.target); } ``` - 接收事件的爷爷组件中，需要在生命周期钩子（如`created`或`mounted`）中注册监听事件： ```javascript import Bus from 'common/js/bus.js'; created() { Bus.$on('getTarget', target => { // 处理接收到的事件 }); } ``` 通过Bus，孙子组件可以触发一个事件，而不论距离多远的组件都可以监听并响应这个事件，从而实现跨组件的通信。 理解并熟练运用$emit和event Bus是成为中级Vue开发者的重要步骤。在实际开发中，根据项目的复杂性选择合适的通信方式，既能保持代码的清晰性，也能提高组件的复用性和可维护性。