Vue组件各种通信方式

每个 Vue 实例都实现了事件接口，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
Vue 的事件系统与浏览器的 EventTarget API 有所不同。尽管它们的运行起来类似，
但是 $on 和 $emit 并不是addEventListener 和 dispatchEvent 的别名

1. props和$emit
   父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。

2. $attrs和$listeners
   第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？
   Vue 2.4开始提供了$attrs和$listeners来解决这个问题，能够让组件A之间传递消息给组件C。

3. 中央事件总线
   可以使用中央事件总线来处理非父子组件间的通信。新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件。
   参考：添加链接描述

4. provide和inject
   适用于祖先和后代关系的组件间的通信，祖先元素通过 provide 提供一个值，后代元素则通过 inject 获取到这个值。

5. v-model
   父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值

6. $parent和$children
   父组件可使用$children操作子组件的$data：

   this.$children.forEach(child => {
   	child.$data.colored = !child.$data.colored // 逐一控制子组件的 $data
   })
   

   子组件可通过 $parent来修改父组件的$data：this.$parent.$data.属性 = xxx

7. boradcast和dispatch
   vue1.0中提供了这种方式，但vue2.0中没有，但很多开源软件都自己封装了这种方式，比如min ui、element ui和iview等。
   比如如下代码，一般都作为一个mixins去使用, broadcast是向特定的父组件，触发事件，dispatch是向特定的子组件触发事件，本质上这种方式还是on和on和emit的封装，但在一些基础组件中却很实用。

8. vuex处理组件之间的数据交互
   如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。

9. $root直接访问根组件