vue项目的provide和inject

原创  郑建华   2021-03-19   222人阅读  0 条评论

    最近在处理一个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即可使用

本文地址:https://www.zjh336.cn/?id=2027
版权声明:本文为原创文章,版权归 郑建华 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?