Vue同级组件间数据传递：$on与$emit方法详解

在Vue.js中，组件之间的通信是其灵活性和可扩展性的重要部分。本文档主要关注如何在两个同级组件（children1 和 children2）之间实现数据传递。在Vue应用中，组件间的通信可以通过以下两种主要方式实现： 1. **父组件向子组件传递值**: - **props** 是一种推荐的方式，用于子组件接收来自父组件的数据。父组件可以通过`<children1 prop="value">`的形式，将自定义属性`prop`绑定到子组件上，然后在子组件的`props`对象中接收这个值。 - 如果需要动态绑定或者复杂的数据结构，可以考虑使用自定义事件`v-on`，但在这个例子中没有提及。 2. **子组件向父组件传递值**: - 子组件通常通过`@自定义事件='函数'`的形式，监听一个自定义事件并触发它。例如，`<children1 @go="parentFunction">`，当点击按钮时，调用`send`方法，`this.$emit('go', '要发送的内容')`会触发`parentFunction`函数，从而将数据传递给父组件。 3. **两个同级组件之间的通信**: - 当需要在两个同级组件间进行通信时，不能直接使用父子关系的`props`或`v-on`，因为它们是单向的。在这种情况下，可以创建一个共享的Vue实例（例如`Event`）作为中继，用于传递数据。文档示例中，创建了一个新的Vue实例，通过`Event.$emit('go', data)`在`children1`组件的`send`方法中发送数据，而在`children2`组件的`created`生命周期钩子中监听`Event`实例上的`go`事件，并更新自身的状态。 具体实现如下： ```html <div id="app"> <children1></children1> <children2></children2> </div> <script> // 创建一个中继Vue实例 var Event = new Vue({}); // 定义children1组件 var children1 = { template: ` <div> <button @click="send">点我给children2组件发送数据</button> </div> `, data() { return { msg: '我是要给children2发送的数据' }; }, methods: { send() { Event.$emit('go', this.msg); } } }; // 定义children2组件 var children2 = { template: ` <div> <h2>从children1组件接收到的值：{{msg1}}</h2> </div> `, data() { return { msg1: '' }; }, created() { // 使用箭头函数确保this指向正确 Event.$on('go', (v) => { this.msg1 = v; }); } }; // 主Vue实例 var vm = new Vue({ el: '#app', components: { children1, children2 } }); ``` 通过这种方式，`children1`组件的点击事件触发了`Event`实例的`go`事件，进而更新了`children2`组件的状态，实现了两个同级组件之间的数据交互。这种设计模式有助于保持组件的独立性，同时保持应用程序的可维护性和模块化。