provide / inject 是 2.2 新增的方法, 可以以一个祖先组件向所有子孙后代注入依赖 (一个内容).
provider/inject: 简单的来说就是在父组件中通过 provider 来提供变量, 然后在子组件中通过 inject 来注入变量.
vue 官方警告:
provide 和 inject 主要为高阶插件 / 组件库提供用例. 并不推荐直接用于应用程序代码中.
当然, 警告只是警告, 你完全可以正常使用.
使用方法非常像 data 和 props 的组合大礼包:
- var Provider = {
- provide: {
- foo: 'bar'
- },
- // ...
- }
- var Child = {
- inject: ['foo'],
- created () {
- console.log(this.foo) // => "bar"
- }
- // ...
- }
唯一的区别是你不用再一层层的传入了, 过去用的 event-bus 虽然可以解决深层问题, 但是会导致整个 event-emit 组成过于混乱, 难以维护. 使用 provide / inject 可以保证父子单向数据流的清晰性.
在 React 中 Context 的 Provider / Consumer 也有相同的效果, 由于还没有具体使用过, 对 React 本身也只有一面之缘, 留待以后在了解, 感兴趣的同学可以 阅读文档 https://reactjs.org/docs/context.html#consumer 了解.
参考文章:
Vue 官方文档 https://cn.vuejs.org/v2/api/index.html#provide-inject
Provide/Inject in Vue 2.2 https://medium.com/@znck/provide-inject-in-vue-2-2-b6473a7f7816
来源: http://www.jb51.net/article/139765.htm