阿尔卑斯丶
圣骑士
圣骑士
  • 最后登录2023-11-03
  • 发帖数59
  • 社区居民
  • 原创写手
阅读:5530回复:2

[vue]组建通信之provide与inject

楼主#
更多 发布于:2020-02-23 19:19
最近在重学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节点就不会再向上查找了(类似于事件冒泡机制)。
doubleyong
管理员
管理员
  • 最后登录2024-06-25
  • 发帖数1175
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
沙发#
发布于:2020-02-24 09:54
666
知识需要管理,知识需要分享
阿尔卑斯丶
圣骑士
圣骑士
  • 最后登录2023-11-03
  • 发帖数59
  • 社区居民
  • 原创写手
板凳#
发布于:2020-02-23 19:50
demo代码贴在github上的,感兴趣的可以看一下 https://github.com/exwangwei/provideAndInject
游客


返回顶部

公众号

公众号