关于 vue.js provide/inject（依赖注入）的学习和记录

前言

定义方式

提示：

provide/inject的基础用法

父组件中：

provide:{
　　for:'demo'
}

这样子组件中无论多深的子组件都可以使用：

inject:['for'],
data(){
　　return{
　　　　demo:this.for
　　}
}

provide/inject的升级用法

父组件中：

provide() {
	return {
		ceshi: this.myData,
	};
},
data() {
	return {
		myData: {
			a: 1,
			b: 0,
		},
	};
},

动态修改 this.myData对象里面的值 所有组件里面的值都会跟着修改

子组件用法：

inject:['ceshi'],
data(){
　　return{
　　　　demo:this.ceshi
　　}
}

相同的 this.ceshi或者demo对象里面的值 所有组件里面的值（包括祖先组件）都会跟着修改
是不是相对于vuex的传值简单多了但是vue官方并不建议使用该方法，原因在于不利于追踪问题位置。
当多人协作是问题更是暴露无遗（个人认为小项目是可以是可以使用该方法的如果你是一个人写的项目的话）
问：在什么地方使用它是最优解呢？
答：当你写插件的时候

使用 provide/inject 做组件开发，是 Vue 官方文档中提倡的一种做法。

以我比较熟悉的 elementUI 来举例：
在 elementUI 中有 Button（按钮）组件，当在 Form（表单）组件中使用时，它的尺寸会同时受到外层的 FormItem 组件以及更外层的 Form 组件中的 size 属性的影响。
如果是常规方案，我们可以通过 props 从 Form 开始，一层层往下传递属性值。看起来只需要传递传递两层即可，还可以接受。但是，Form 的下一层组件不一定是 FormItem，FormItem 的下一层组件不一定是 Button，它们之间还可以嵌套其他组件，也就是说，层级关系不确定。如果使用 props，我们写的组件会出现强耦合的情况。

provide/inject 可以完美的解决这个问题，只需要向后代注入组件本身（上下文），后代组件中可以无视层级任意访问祖先组件中的状态。

部分源码如下：

// Button 组件核心源码
export default {
  name: 'ElButton',
  // 通过 inject 获取 elForm 以及 elFormItem 这两个组件
  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },
  // ...
  computed: {
    _elFormItemSize() {
      return (this.elFormItem || {}).elFormItemSize;
    },
    buttonSize() {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    //...
  },
  // ...
};