依赖注入

组件传参问题

我们在使用Vue组件时，经常需要向子组件传递各种参数。我们都知道父组件向子组件传参是通过props实现对吧。

那么如果是需要往孙子组件传参数怎么办呢，就必须要让爷爷组件先传给爸爸组件，然后爸爸组件再传给孙子组件，孙子想用爷爷的东西还得必须经过爸爸去要，多层组件的话就需要一层一层通过props往下传，这样会非常的麻烦。

prop-drilling.11201220.png

如果有一种方法爷爷组件可以直接把东西给到孙子组件就好了也就是在顶级组件传一个props，然后下面后代的某个组件可以直接使用传入的props就好了，不需要一层一层往下传。

provide-inject.3e0505e4.png

Provide/Inject介绍

幸运的是在Vue2.2.0 新增了这样的方法，那就是Provide和Inject

provide 和 inject 可以帮助我们解决这一问题。 [1] 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

通俗一点讲就是：

在顶级组件通过Provide提供数据，在需要使用数据的后代组件中通过Inject注入数据

Provide/Inject的使用

假设我们有三个组件，分别为

爷爷组件：grandpa.vue
爸爸组件: parent.vue
孙子组件: child.vue

Provide

在爷爷组件通过Provide提供了一个名称为message数据，这个名称可以自定义。不需要通过props了。

grandpa.vue

<tempalte>
  <div>
    <Parent />
  </div>
</tempalte>

<script>
import Parent from './parent.vue'
export default {
  components: { Parent },
  data(){
    return {}
  },
  provide: {
    message: 'hello, world'
  },
}
</script>

下面是爸爸组件，这个里面什么都不需要做，只需要正常引入孙子组件就行了。

Parent.vue

<tempalte>
  <div>
    <Child />
  </div>
</tempalte>

<script>
import Child from './child.vue'
export default {
  components: { Child },
}
</script>

Inject

在孙子组件中通过Inject注入爷爷组件提供的名称为message数据, 然后就可以获取到这个值了。

<tempalte>
  <div>
    {{ message }}
  </div>
</tempalte>

<script>
export default {
  inject: ['message'],
  created () {
    console.log(this.message) // => "hello, world"
  }
}
</script>

这里只是介绍了一下基础的使用方法，更多的内容请查看Vue官方的文档：依赖注入|Vue.js

更多内容请扫描二维码关注虚竹僧公众号

扫码_搜索联合传播样式-标准色版.png

Vue依赖注入provide和inject快速入门