Vue 2.0 中子同级组件之间的数据交互方法详解

Vue2.0子同级组件之间数据交互方法 在本文中，我们将讨论 Vue2.0 中子同级组件之间数据交互的方法。 Vue.js 是一个轻量级的渐进式框架，对于它的一些特性和优点，请在官网上进行查看，不再赘述。 一、创建中央事件总线 在 Vue 项目中，我们可以创建一个中央事件总线，用于组件之间的通信。在 src/assets/ 下创建一个 eventBus.js，内容如下： ``` import Vue from 'vue' export default new Vue() ``` 这个文件创建了一个新的 Vue 实例，用于承担组件之间通信的桥梁。 二、创建FirstChild 组件 接下来，我们创建一个FirstChild 组件，引入 eventBus 这个事件总线，接着添加一个按钮并绑定一个点击事件： ``` <template> <div> <button @click="sendMsg">点击传值</button> </div> </template> <script> import eventBus from '../assets/eventBus' export default { methods: { sendMsg() { eventBus.$emit('userDefinedEvent', 'Hello, SecondChild!') } } } </script> ``` 在这个组件中，我们使用了 $emit 方法触发了一个自定义的用户定义事件，并传递了一个字符串参数。 三、创建SecondChild 组件 然后，我们创建一个 SecondChild 组件，引入 eventBus 事件总线，并用一个 p 标签来显示传递过来的值： ``` <template> <div> <p>{{ msg }}</p> </div> </template> <script> import eventBus from '../assets/eventBus' export default { data() { return { msg: '' } }, mounted() { eventBus.$on('userDefinedEvent', (msg) => { this.msg = msg }) } } </script> ``` 在这个组件中，我们使用了 $on 方法监听了用户定义事件，并在回调函数中处理传递过来的参数。 四、在父组件中注册组件 最后，在父组件中，我们注册这两个组件，并添加这两个组件的标签： ``` <template> <div> <FirstChild /> <SecondChild /> </div> </template> <script> import FirstChild from './FirstChild.vue' import SecondChild from './SecondChild.vue' export default { components: { FirstChild, SecondChild } } </script> ``` 保存所有修改的文件，然后打开浏览器窗口，点击“向组件传值”按钮，我们可以看到传值成功。 总结： 1. 创建一个事件总线，例如 demo 中的 eventBus，用它作为通信桥梁。 2. 在需要传值的组件中用 bus.$emit 触发一个自定义事件，并传递参数。 3. 在需要接收数据的组件中用 bus.$on 监听自定义事件，并在回调函数中处理传递过来的参数。 此外，兄弟组件之间与父组件之间的通信也可以使用这个方法实现。 在使用这个方法时，需要注意的是，eventBus 应该是单例的，以免出现多个实例引发的通信问题。 此外，使用 eventBus 还可以实现组件之间的解耦，提高代码的可维护性和可扩展性。