vue中provide和inject的使用

对于provide [prəˈvaɪd]和inject官网解释是这样的：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

简单理解就是父组件可以通过provide向子孙组件传值，子组件通过inject来接收

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

通过provide和inject去让父组件去统一管理子孙组件状态，举个例子有个家庭联系人表单

表单内默认都是非必填的，只要填了一信息后其他都是必填的，要完成这个功能就可以使用provide和inject

//父组件
provide() {
    return {
      ValidateGroup: this//这个this是父组件实例
    }
  },
  data() {
    return {
      hasValueMemberCount: 0,//这是父组件用于标记表单中已经填写的字段个数
    };
  },
  computed: {
    shouldRequireValidate() {//这个计算属性用于判断是否表单所有字段都必填
      return this.hasValueMemberCount > 0;
    }
  },
  methods: {
    add() {//hasValueMemberCount增加的方法
      this.hasValueMemberCount++
    },
    minus() {//hasValueMemberCount减少的方法
      this.hasValueMemberCount--
    },
  }

//子孙组件
inject: {
    ValidateGroup: {//接收父组件的实例
      default: null
    }
  },
watch: {
 value: {//监听单个表单中的值是否改变
      handler(newValue, oldValue) {
        if (!!this.ValidateGroup) {
          this.handleMemberValueChangeForGroup(newValue, oldValue);
        }
      }
    }
  },
 methods: {
   handleMemberValueChangeForGroup(newVal, oldVal) {
      // 加一（从 空值 变成 有值）
      if (oldVal === "" && newVal !== "") {
        this.ValidateGroup.add();
      }
      // 减一 （从 有值 变成 空值）
      if (oldVal !== "" && newVal === "") {
        this.ValidateGroup.minus();
      }
    },
  // 判断组成员是否需要跳过非空校验
    isSkipMemberRequireValidate() {
      let isSkip = true;
      if (this.hasValidateGroup && this.ValidateGroup.shouldRequireValidate) {
        isSkip = false;
      }
      return isSkip;
    }
 }
 

在上述代码中，当isSkipMemberRequireValidate为false时子孙组件开启非空校验，这样做的好处就是以后父组件中增加其他子孙组件字段时，其他子孙组件也有自动判断是否开启非空校验的功能，组件扩展性更高