Vue中$emit与$on：父子及兄弟组件间高效通信详解

Vue中的$emit和$on是Vue.js用于组件间通信的重要工具，它们在实现父子组件以及兄弟组件之间的数据传递和事件交互中扮演关键角色。本文将详细介绍这三种主要的通信方式： 1. **父组件向子组件的传值**: 在父组件中，通过`props`属性将数据传递给子组件。例如，在`parent.vue`中，我们看到父组件通过`<child v-bind:vals="msg"></child>`将`msg`数据绑定到子组件的`vals` prop上。在子组件`child.vue`中，`props`的定义接收一个字符串类型的`vals`，并允许设置默认值。 2. **子组件向父组件的传值**: 子组件通过`$emit`触发自定义事件来通知父组件更新。有两种常见的方式： - **由子组件主动触发**：子组件内部通过`$emit('event-name', value)`触发事件，父组件则通过`v-on`指令监听该事件，例如`v-on:childEvent='wathChildEvent'`。这样，当子组件需要更新数据时，会主动触发事件并传递数据。 - **由父组件控制触发**：父组件通过`ref`属性获取子组件实例，然后调用子组件的方法触发事件，如`this.$refs.child.$emit('event-name', value)`。这种方式下，父组件可以主动控制何时触发子组件的更新。 3. **兄弟组件之间的通信**: 兄弟组件间的通信通常不直接使用`$emit`和`$on`，因为它们不具备直接的父子关系。可以通过以下几种方法实现： - **事件总线（Event Bus）**：创建一个独立的全局事件中心，兄弟组件通过发布/订阅事件的方式来通信。 - **Vuex**：如果组件共享状态管理，可以使用Vuex状态管理库，通过actions或mutations在组件间传递数据。 - **自定义属性（$attrs/$listeners）**：在Vue 2.x中，可以使用`$attrs`和`$listeners`来交换兄弟组件间的属性和事件。 总结来说，$emit和$on是Vue组件通信的核心机制，理解并熟练运用它们能有效构建可维护的组件化应用。在实际开发中，开发者需根据场景选择合适的方法，以确保组件间的高效和灵活通信。