• Vuejs选项: provide/inject


    provide 和 inject 是成对出现的:

      provide: 父级(或者更外层的组件)组件 提供的可供子组件(或这更内层组件)注入的属性;

           而不必这个内层组件处于什么层级;

      inject: 内层组件可注入的属性(属性由外层组件提供),是内层组件可直接访问外层组件的某个属性或方法,而不必暴漏整个实例;

          不必知道这个注入属性是由哪外层组件暴漏的;

      共同点: 注入属性和props类似,都是通过显示声明的;

      这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

    使用场景:

      provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

    参考:

    https://cn.vuejs.org/v2/api/#provide-inject

    https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5

      

     1 // 父级组件提供 'foo'
     2 var Provider = {
     3   provide: {
     4     foo: 'bar'
     5   },
     6   // ...
     7 }
     8 
     9 // 子组件注入 'foo'
    10 var Child = {
    11   inject: ['foo'],
    12   created () {
    13     console.log(this.foo) // => "bar"
    14   }
    15   // ...
    16 }
    17 
    18 
    19 // 使用一个注入的值作为一个属性的默认值:
    20 const Child = {
    21   inject: ['foo'],
    22   props: {
    23     bar: {
    24       default () {
    25         return this.foo
    26       }
    27     }
    28   }
    29 }
    30 
    31 // 使用一个注入的值作为数据入口:
    32 const Child = {
    33   inject: ['foo'],
    34   data () {
    35     return {
    36       bar: this.foo
    37     }
    38   }
    39 }
    40 
    41 // 与 prop 的默认值类似,你需要对非原始值使用一个工厂方法:
    42 const Child = {
    43   inject: {
    44     foo: {
    45       from: 'bar',
    46       default: () => [1, 2, 3]
    47     }
    48   }
    49 }
  • 相关阅读:
    1.3.9、通过权重 Weight匹配
    1.3.8、通过RemoteAddr匹配
    1.3.7、通过QueryParam匹配
    1.3.6、通过Path匹配
    1.3.5、通过Method匹配
    1.3.4、通过Host匹配
    css选择器优先级如何计算
    pm2常用命令
    前端微服务 二
    前端微服务
  • 原文地址:https://www.cnblogs.com/baota/p/12738660.html
Copyright © 2020-2023  润新知