vue项目的provide和inject

    最近在处理一个bug时，意外接触到了provide和inject。事情是这样的，页面有一个弹层，弹层中定义若干步骤条，每个步骤条对应一个子组件。而步骤条本身也是一个组件。然而在第一个步骤中加载到数据后，需要根据数据再重新定义步骤条数量。所以需要在子组件中调用最外层组件的重置步骤条数据方法。在子组件内部触发方法，通过$refs的方式，调用两层parent是可以正常调用成功的，但是由于通过编辑按钮进入组件初始化。$refs会存在偶发性故障，子组件调用父组件时，还未渲染完成，导致无法实现效果。那么，就可以通过provide和inject来实现这个功能了，并且不会出现渲染问题。父组件注册这个方法，子组件进行调用。

父组件

export default {
  name: 'QualityCheckPlanDialog',
  directives: {
    stopReClick
  },
  provide() {
    return {
      resetComponentArr: this.resetComponentArr
    }
  }
}

子组件

export default {
  name: 'PlanSet',
  props: {
    curSteps: {
      type: Number,
      default() {
        return -1
      }
    }
  },
  inject: ['resetComponentArr']
}

直接通过this.resetComponentArr即可使用