如何从VueJS中的mixin访问“提供/注入”值？

Question

我正在尝试从VueJS中的mixin访问provided / injected值。我可以从任何组件中看到这些值，但不能从mixin中看到。我正在尝试的是什么？

https://jsfiddle.net/frang/c6c7kqhp/2/1

let myMixin = {
  inject: ['myDependency'],
  created: function() {
    console.log('in mixin', this.myDependency)
  }
}

Vue.component('my-component', {
  inject: ['myDependency'],
  created: function() {
    console.log('in component', this.myDependency)
  }
})

new Vue({
  el: '#example',
  provide() {
    return {
        myDependency: 'here is my value'
    }
  },
  mixins: [myMixin]
})

Answer 1

问题是您尝试在提供它的同一Vue实例中注入myDependency属性。

指定provide属性的Vue实例通过inject为其子组件提供对该值的访问权限。但是，您不能inject在同一个实例上提供的值。

您需要在子组件中使用mixin：

Vue.component('my-component', {
  mixin: ['myMixin'],
  created: function() {
    console.log('in component', this.myDependency)
  }
})

Here's a working fiddle.