Vue学习：16.组件通信

组件通信就是指组件之间的数据传递。由于组件的数据是独立的，无法直接访问其他组件的数据，所以想要使用其他组件数据必须通过 组件通信！

在Vue.js中，组件之间的通信可以通过多种方式实现，包括 props、事件、$emit / $on、Vuex 状态管理等。

要讲组件通信首先来说一下组件关系。

组件关系

在Vue.js中，组件之间的关系可以分为父子关系、兄弟关系和祖先后代关系。

如图所示，A与B、C便是父子关系；B和C便是兄弟关系；A和D事祖先后代关系。

其实可以更为简略的划分为：父子关系、非父子关系。

组件通信分类

而根据组件之间的关系，可以将组件通信分类为以下几种：

1. 父子组件通信

• Props / $emit: 父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件，向父组件传递数据。
• $refs: 父组件可以通过 ref 属性引用子组件的实例，直接调用子组件的方法或访问子组件的数据。（通过this.$ref.实例名获取子组件DOM实例 然后调用实例的方法）

2. 兄弟组件通信

• 事件总线(Event Bus): 通过一个空的 Vue 实例作为中央事件总线，兄弟组件通过该实例进行