1.什么是组件通信：

组件（.vue）通过某种方式来传递信息以达到某个目的

2.组件通信可以解决什么问题：

每个组件之间都有独立的作用域，组件间的数据是无法共享的，但在实际开发中我们常常需要让组件之间共享数据，组件通讯可以让它们之间能进行通讯，这样才能构成完整的系统。

3.父子组件通信

3.1 方法一：props / $emit

父组件A通过props的方式向子组件B传递，B传A通过在B组件中$emit,A组件中v-on的方式实现。

3.2 方法二：$children / $parent

$children:获取到一个包含所有子组件（不包含孙组件）的VueComponent对象数组，可以直接拿到子组件中所有的数据和方法等

$parent: 获取到一个父节点的VueComponent 对象，同样包含父节点中所有数据和方法等

3.3 方法三 ：$attrs / $listeners

$attrs:包含父作用域里除class 和 style 外的非props属性集合。通过 this.$attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的的其他组件，通过 v-bind = ' $attrs  '来实现

$listeners :包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过 v-on = ' $linteners'

4.同级组件通信

数据提升：A修改B，把B中的数据提升到公共的父组件里面，A通过子传父修改父亲的数据，父亲通过父传子传递把数据传递到B

5.跨层级组件通信

vuex全局状态共享

EventBus中央事件总线

不管是父子组件，兄弟组件，跨层级组件等都可以使用它完成通信操作

定义方法：

1.抽离成一个单独的js文件 Bus.js ，然后再需要的地方引入

1.1 A / B => import Bus from ' ./Bus.js '

1.2.A=> Bus.$emit(' 自定义事件名',' 传输的数据 ')

1.3.B =>Bus . $on (' 自定义事件名' ，function(接收的数据) {})

2.直接挂载到全局 Vue.prototype.$bus = new Vue()使用的时候$bus.

2.1 A=>this.$bus.$emit(' 自定义事件名',' 传输的数据 ')

2.2 B=> this.$bus.$on  (' 自定义事件名' ，function(接收的数据) {})

3.注入到Vue根对象上面 new Vue ({data: {Bus:new Vue()})

什么是组件：

组件就是把图形、非图形的各种逻辑均抽象为一个'统一的概念（组件）来实现开发的模式，在vue中每一个.vue文件都可以视为一个组件

组件的优势：

1.降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求

2.调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间的低耦合，职责单一，所以逻辑会比分析整个系统要简单

3.提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可以获得系统的整体升级