组件之间的循环引用

qq_45505241

于 2022-09-14 10:53:24 发布

阅读量321

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_45505241/article/details/126848147

版权

前端 javascript 开发语言

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

a引用b组件，b又引用了a组件
1.

beforeCreate() {
    this.$options.components.bonusSettlementSecondStep = () => import('./bonusSettlementSecondStep')
  },

  components: {
    // BonusSettlementFirstStep与BonusSettlementSecondStep循环引用，需异步导入
    bonusSettlementSecondStep: () => import('./bonusSettlementSecondStep')
  },

方法1和方法2要注意，和递归的使用要求一样，在引用的子组件上加上一个存在false情况的限制条件，否则两个组件会无限循环，导致“Maximum call stack size exceeded”的错误。如此处的renderStep2默认false，在a组件打开b组件时将其设为true

<bonus-settlement-second-step v-if="renderStep2" ref="bonusSettlementSecondStep" />

// 下一步
    handleNextStep() {
      this.renderStep2 = true
      this.visible = false
      setTimeout(() => {
        this.$refs.bonusSettlementSecondStep.init()
      }, 250)
    },