vue.js 是当前前端界非常流行的一款 javascript 框架，拥有着响应式的数据绑定、组件化的视图架构以及依赖追踪和模板渲染等等很多的优秀特性。而其中最为常用的功能便是组件化编程，vue 为我们提供了如组件注册、组件传参等等功能检验，但在某些情况下组件数据的传递便会遇到较为棘手的问题，此时，我们就可以使用 vue 中提供的 provide 和 inject 解决这类问题。
理解 provide & inject
provide
Vue2.2.0 版本新增了 provide / inject ， 其能够更好的帮助我们完成面向对象编程的需求。通俗的讲 provide 就是我们可以在父组件中提供数据，然后再子组件中使用 inject 来获取所需要的数据的一个过程。
提供一个例子来更好的理解 provide ：
在父组件中，我们向下提供了一个键为 foo 的数据给到子组件中。随后在子组件中我们我可以通过 inject 来获取这份数据。
我是子组件，我获取到了一个名为"foo"的属性的值：{{foo}}
立即学习“前端免费学习笔记（深入）”；
到这里，我们就实现了提供和注入的完整过程。通过 provide 我们在父组件中提供数据，随后再子组件中使用 inject 来获取数据，从而完成了组件之间的数据传递。
inject
inject 是一个数组，列表中声明要注入的属性名。在子组件注入一个对象，该对象的属性名与提供的键名相同，值为提供的数据。
提供一个具体的事例来理解 inject ：
我是祖先组件祖先组件中给我的数据是什么呢？ {{ name }}
以上代码中，provide 函数可以理解为父组件向下层子组件提供数据，子组件再通过 inject 来接收这份数据，实现了数据的传输过程。
家电公司网站源码是一个以米拓为核心进行开发的家电商城网站模板，程序采用metinfo5.3.9 UTF8进行编码，软件包含完整栏目与数据。安装方法：解压上传到空间，访问域名进行安装，安装好后，到后台-安全与效率-数据备份还原，恢复好数据后到设置-基本信息和外观-电脑把网站名称什么的改为自己的即可。默认后台账号：admin 密码：132456注意：如本地测试中127.0.0.1无法正常使用，请换成l
使用场景
此时，你可能会问：我们已经有了 props 父子组件之间的通信了，为什么还需要 provide/inject 呢？
其实，这两者在使用场景上是不太相同的。以下是一些可使用 provide/inject 实现父子组件通信的一些场景：
- 跨级组件间的通信
在 Vue 中，父子组件之间的通信可以通过 props 实现，但是当跨级组件时，使用 props 传递数据将会变得非常繁琐。而此时可以通过 provide / inject 方式，在祖先组件中提供数据，然后在子孙组件中通过 inject 获取所需数据。
- 父组件不清楚具体的子组件实现
在某些情况下，父组件并不清楚子组件内部的数据具体存放在哪个 props 中，而此时可以通过 provide 的方式将数据传递到子组件中。
- 可以用一个观察者来观察值的变化，帮助组件集成的实现
通过 provide / inject 方式，我们可以将数据提供给子孙组件，给父级留下观察的入口，从而实现组件集成。
- 不适合使用 props 时
在 Vue 中，props 是唯一一种官方的、比较好用的、用于父子之间传递数据的方式。但是在某些情况下，如多个子组件希望使用相同的全局变量、提供的公共方法的情况下，就可以使用 provide / inject 方式。
总结
通过本文的介绍，我们了解到了 Vue 中提供的 provide / inject 的基本用法，以及它们的使用场景。
在使用 provide / inject 的过程中，我们需要注意三点：
-
provide / inject主要用于高阶插件开发，对于开发普通组件的程序员是不需要掌握的。 - provide 选项应该是一个对象或返回一个对象的函数。这个对象包含可注入其它组件的属性。
-
provide / inject主要解决的问题是跨层级组件之间的信息传递，常用于插件开发。
最后，当我们遇到跨级组件通信等问题时，就可以使用 provide / inject 来解决问题，它为我们提供了更便捷的编程方式，让我们的代码更加简洁、易懂。
