Vue的依赖注入

Vue的依赖注入

依赖注入官方文档
当一个module拥有超过两层的组件时，从后代组件一层层emit出去调用祖先组件的方法或一层层将祖先的数据用props传递到后代组件实在是太麻烦，当需要修改时也需要一层层去找需要修改的地方

vue.js提供了一个“依赖注入”的方式，在这个方式中用到了两个新的实例选项：provide和inject

provide选项允许我们指定我们想要提供给后代组件的数据/方法。
祖先组件：

...
data() {
 return {
  msg: ‘I am origin component data’
 }
},
provide: function() {
 return {
  getData() {
   console.log(‘hi，I come from origin component’)
  }
 },
 msg: this.msg
},
...

inject可以在任何后代组件使用来接受我们在祖先指定的数据/方法
后代组件：

...
inject: [‘getData’, ‘msg’],
created() {
 this.init()
},
methods: {
 init() {
  console.log(this.msg),
  this.getData()
 }
}
...

然而，依赖注入还是有负面影响的。它将你应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。同时所提供的 property 是非响应式的。这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟使用 $root做这件事都是不够好的。如果你想要共享的这个 property 是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了