vue组件通信的方式

父组件向子组件通信

概念：父组件通过props向子组件传递数据，子组件通过props接收数据；

父组件

子组件

子组件向父组件通信

概念：子组件通过$emit触发一个自定义事件，父组件通过v-on监听该自定义事件，并在相应的方法中处理事件传递的数据。

父组件

子组件

兄弟组件通信

eventBus事件总线适用于父子组件、非父子组件等之间的通信

概念：使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。

在main.js中配置eventBus

// eventBus
Vue.prototype.eventBus=new Vue()

左组件

右组件

v-model

概念：通过v-model指令可以实现双向绑定，父组件可以通过v-model传递 数据给子组件，并且子组件可以通过修改v-model绑定的值来通知父组件。

父组件

子组件

.sync

概念：通过.sync修饰符可以简化子组件向父组件传递数据的过程

父组件

子组件