• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • vue手册
  • php手册
  • MySQL手册
  • apache手册
  • redis手册
  • provide / inject

    类型:

    • provide:Object |()=> Object
    • inject:Array<string>|{[key: string]: string | Symbol | Object}

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

    provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持SymbolReflect.ownKeys的环境下可工作。

    inject选项应该是:一个字符串数组,或一个对象。对象的key是本地的绑定名,value是:在可用的注入内容中搜索用的 key(字符串或 Symbol),或一个对象,该对象的:from property 是在可用的注入内容中搜索用的 key(字符串或 Symbol)、default property 是降级情况下使用的 value

    提示:provideinject绑定并不是响应式的。这是刻意为之的。然而,如果你传入了一个响应式的对象,那么其对象的 property 仍是响应式的。


    /// 父级组件提供 'foo'
    const Provider = {
      provide: {
        foo: 'bar'
      }
      // ...
    }
    
    // 子组件注入 'foo'
    const Child = {
      inject: ['foo'],
      created() {
        console.log(this.foo) // 输出 "bar"
      }
      // ...
    }
    

    利用 ES2015 Symbols、函数provide和对象inject

    const s = Symbol()
    
    const Provider = {
      provide() {
        return {
          [s]: 'foo'
        }
      }
    }
    
    const Child = {
      inject: { s }
      // ...
    }
    

    使用一个注入的值作为一个 property 的默认值:

    const Child = {
      inject: ['foo'],
      props: {
        bar: {
          default() {
            return this.foo
          }
        }
      }
    }
    

    使用一个注入的值作为数据入口:

    const Child = {
      inject: ['foo'],
      data() {
        return {
          bar: this.foo
        }
      }
    }
    

    注入可以通过设置默认值使其变成可选项:

    const Child = {
      inject: ['foo'],
      data() {
        return {
          bar: this.foo
        }
      }
    }
    

    如果它需要从一个不同名字的 property 注入,则使用from来表示其源 property:

    const Child = {
      inject: {
        foo: { default: 'foo' }
      }
    }
    

    与 prop 的默认值类似,你需要对非原始值使用一个工厂方法:

    const Child = {
      inject: {
        foo: {
          from: 'bar',
          default: () => [1, 2, 3]
        }
      }
    }
    

    上篇:mixins

    下篇:setup