provide / inject

provide / inject

New in 2.2.0+

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

Details:

provide and inject are primarily provided for advanced plugin / component library use cases. It is NOT recommended to use them in generic application code.

This pair of options are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain. If you are familiar with React, this is very similar to React’s context feature.

The provide option should be an object or a function that returns an object. This object contains the properties that are available for injection into its descendants. You can use ES2015 Symbols as keys in this object, but only in environments that natively support Symbol and Reflect.ownKeys.

The inject option should be either:
    an array of strings, or
    an object where the keys are the local binding name and the value is either:
        the key (string or Symbol) to search for in available injections, or
        an object where:
            the from property is the key (string or Symbol) to search for in available injections, and
            the default property is used as fallback value

    Note: the provide and inject bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.

Example:

// parent component providing 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// child component injecting 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

With ES2015 Symbols, function provide and object inject:

const s = Symbol()

const Provider = {
  provide () {
    return {
      [s]: 'foo'
    }
  }
}

const Child = {
  inject: { s },
  // ...
}

    The next 2 examples work with Vue 2.2.1+. Below that version, injected values were resolved after the props and the data initialization.

Using an injected value as the default for a prop:

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

Using an injected value as data entry:

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

    In 2.5.0+ injections can be optional with default value:

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

If it needs to be injected from a property with a different name, use from to denote the source property:

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

Similar to prop defaults, you need to use a factory function for non primitive values:

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