常见使用场景可以分为三类：

  • 父子通信：
    父向子传递数据是通过 props，子向父是通过 events（ $emit）；
    通过父链 / 子链也可以通信（ $parent / $children）；
    ref 也可以访问组件实例；
    provide / inject API；
    $attrs/$listeners
  • 兄弟通信： Bus；Vuex
  • 跨级通信： Bus；Vuex；provide / inject API、 $attrs/$listeners

父子爷孙组件通信

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

$attrs

$attrs 里存放的是父作用域中不作为 prop 的特性绑定 (class 和 style 除外) 而且在子组件中也没有props注册的属性
**

父组件要传的值(age,name),在子组件中, 没用props注册. 在子组件中包含在$attrs中, 以object的形式访问到.

$listeners

子组件可以触发父组件的事件（不需要用什么那些麻烦的vuex或者一个空的 Vue 实例作为事件总线，或者又是什么vm.$on )

image.png

provide inject 通信

使用Vue.observable实现数据响应式

  1.   // provide() {
  2.   //   this.theme = Vue.observable({
  3.   //     color: "blue"
  4.   //   });
  5.   //   return {
  6.   //     theme: this.theme
  7.   //   };
  8.   // },
  9.   // methods: {
  10.   //   changeColor(color) {
  11.   //     if (color) {
  12.   //       this.theme.color = color;
  13.   //     } else {
  14.   //       this.theme.color = this.theme.color === "blue" ? "red" : "blue";
  15.   //     }
  16.   //   }
  17.   // }

最小化的跨组件状态存储器


Vue.observable( object ) 2.6.0 新增

返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：