feat: provide/inject (close #4029)

src/core/instance/init.js

@@ -4,6 +4,7 @@ import { initProxy } from './proxy'
 import { initState } from './state'
 import { initRender } from './render'
 import { initEvents } from './events'
+import { initInjections } from './inject'
 import { initLifecycle, callHook } from './lifecycle'
 import { mergeOptions } from '../util/index'
 
@@ -42,6 +43,7 @@ export function initMixin (Vue: Class<Component>) {
     initRender(vm)
     callHook(vm, 'beforeCreate')
     initState(vm)
+    initInjections(vm)
     callHook(vm, 'created')
     if (vm.$options.el) {
       vm.$mount(vm.$options.el)

src/core/instance/inject.js

@@ -0,0 +1,24 @@
+export function initInjections (vm) {
+  const { provide, inject } = vm.$options
+  if (provide) {
+    vm._provided = typeof provide === 'function'
+      ? provide.call(vm)
+      : provide
+  }
+  if (inject) {
+    const isArray = Array.isArray(inject)
+    const keys = isArray ? inject : Object.keys(inject)
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i]
+      const provideKey = isArray ? key : inject[key]
+      let source = vm
+      while (source) {
+        if (source._provided && source._provided[provideKey]) {
+          vm[key] = source._provided[provideKey]
+          break
+        }
+        source = source.$parent
+      }
+    }
+  }
+}

test/unit/features/options/inject.spec.js

@@ -0,0 +1,127 @@
+import Vue from 'vue'
+
+describe('Options provide/inject', () => {
+  let injected
+  const injectedComp = {
+    inject: ['foo', 'bar'],
+    render () {},
+    created () {
+      injected = [this.foo, this.bar]
+    }
+  }
+
+  beforeEach(() => {
+    injected = null
+  })
+
+  it('should work', () => {
+    new Vue({
+      template: `<child/>`,
+      provide: {
+        foo: 1,
+        bar: 2
+      },
+      components: {
+        child: {
+          template: `<injected-comp/>`,
+          components: {
+            injectedComp
+          }
+        }
+      }
+    }).$mount()
+
+    expect(injected).toEqual([1, 2])
+  })
+
+  it('should use closest parent', () => {
+    new Vue({
+      template: `<child/>`,
+      provide: {
+        foo: 1,
+        bar: 2
+      },
+      components: {
+        child: {
+          provide: {
+            foo: 3
+          },
+          template: `<injected-comp/>`,
+          components: {
+            injectedComp
+          }
+        }
+      }
+    }).$mount()
+
+    expect(injected).toEqual([3, 2])
+  })
+
+  it('provide function', () => {
+    new Vue({
+      template: `<child/>`,
+      data: {
+        a: 1,
+        b: 2
+      },
+      provide () {
+        return {
+          foo: this.a,
+          bar: this.b
+        }
+      },
+      components: {
+        child: {
+          template: `<injected-comp/>`,
+          components: {
+            injectedComp
+          }
+        }
+      }
+    }).$mount()
+
+    expect(injected).toEqual([1, 2])
+  })
+
+  it('inject with alias', () => {
+    const injectAlias = {
+      inject: {
+        baz: 'foo',
+        qux: 'bar'
+      },
+      render () {},
+      created () {
+        injected = [this.baz, this.qux]
+      }
+    }
+
+    new Vue({
+      template: `<child/>`,
+      provide: {
+        foo: 1,
+        bar: 2
+      },
+      components: {
+        child: {
+          template: `<inject-alias/>`,
+          components: {
+            injectAlias
+          }
+        }
+      }
+    }).$mount()
+
+    expect(injected).toEqual([1, 2])
+  })
+
+  it('self-inject', () => {
+    const vm = new Vue({
+      provide: {
+        foo: 1
+      },
+      inject: ['foo']
+    })
+
+    expect(vm.foo).toBe(1)
+  })
+})