vue 组件之间的传值

1，props、事件$emit

   父组件向子组件传值（props）

2、$emit、$on （Bus）

通过新建Vue实例（Bus）作为中央事件总线（事件中心），用它来触发事件($emit)和监听事件($on),巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。

3，$attrs、$listeners （属性，事件）

      多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法 $attrs/$listeners。（解决跨级组件传值）

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用

$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
      简单来说：$attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。

4、provide、inject

    两者一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

即：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。

    provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。为高阶插件/组件库提供用例。

5、$parent、$children 与 ref、$refs

  $parent和$children：在组件中，直接使用$parent获取父组件的实例，使用$children获取子组件的实例；

   ref和$refs：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。     

给子组件指定ref属性：   template:'<son ref="myRef"></son>'
在父组件中，通过引用得到子组件的实例：  this.$refs.myRef.属性/方法

这两种方法的弊端是，无法在跨级或兄弟间通信。