浅谈Vue2中provide和inject使用

通常，当我们需要将数据从父组件传递到子组件时，我们使用 props。想象一下这样的结构：你有一些深嵌套的组件，而你只需要来自深嵌套子组件中父组件的某些内容。在这种情况下，你仍然需要将 prop 传递到整个组件链中，这可能会很烦人。对于这种情况，我们可以使用 provide 和 inject 对。父组件可以作为其所有子组件的依赖项提供程序，而不管组件层次结构有多深。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这个数据。

上面这段话出自官方，内容也比较好理解，就是通常数据传递一层，我们使用prop就可以很好的解决，如果传递多层，再使用prop就不是很好的方案，这时需要provide和inject

1 provide

在 provide 中指定要传递给子孙组件的数据。

       provide: {
         data: '给子孙的数据'
       },
   
  

如果我们尝试提供一些组件实例 property

       data() {
         return {
           data:"给子孙的数据"
         }
       },
       provide() {
         return {
           data: this.data
         }
       },
   
  

2 inject

子孙组件通过inject注入祖父组件传递过来的数据。

       data() {
         return {}
       },
       inject: ['data'],
   
  

可以看出是个数组，所以里面可以注入多个，另一种方式就是直接一个变量接

const data= inject('data')
  

3 总结

官方其实不推荐在应用程序代码中直接使用，因为数据追踪比较困难，不知道那一层级声明了 provide 又或是哪些层级使用了 inject 。造成比较大的维护成本。因此，除组件库或高阶插件外，Vue建议用Vuex解决或其他办法处理。