[vue]组建通信之provide与inject

最近在重学vue的内容，看到一个vue的高级特性，以解决多层组件间的通信问题（这种解决方法在平常处理业务逻辑中较少使用，在通用式组件中会大量使用）。

图片：clipboard.png

如果按照一般的操作，假如E组件要和I组件进行通信，就是要使用props属性和$emit方法进行通信，这种操作是脆弱的，并且消耗的资源也很大，provide与inject就是为了处理多层组件间的通信而诞生的。

provide提供数据，inject注入数据，E节点和A节点及逆行通信的时候（或者说E节点去A节点获取数据时），通过层层冒泡的一个形式到A节点去取数据

A组件中，provide提供数据：

provide() {  //provide提供数据
    return {
      themes: this
    };
  },
  data() {
    return {
      color: "yellow"
    };
  },

E、F节点中获取数据：

inject: {  
    themes: {
      default: () => ({})
    }
  },

inject: {
  theme1: {  //为了避免名字重复起的别名
    from: "theme",  //真名在这个from中
    default: () => ({})
  }
}

I节点使用的函数式组件，所以取值不一样：

inject: {
   theme: {
     default: () => ({})
   }
 }

<template functional>
  <div class="border2">
    <h3 :style="{ color: injections.theme.color }">I 结点</h3>
  </div>
</template>

provide里边提供的数据默认不是响应式的数据，假如在C节点中提供一个provide，包含theme，那么就只会找到C节点就不会再向上查找了（类似于事件冒泡机制）。

666

demo代码贴在github上的，感兴趣的可以看一下 https://github.com/exwangwei/provideAndInject