vue组件循环依赖

1、两个组件相互引用导致的报错，代码如下：

  

    {{ message }}
    
  


import B from './B.vue';
export default {
  components: { B },
  data() {
    return {
      message: 'Hello from A'
    };
  }
};

  

    {{ message }}
    
  


import A from './A.vue';
export default {
  components: { A },
  data() {
    return {
      message: 'Hello from B'
    };
  }
};

在这种情况下，虽然它们循环引用，但只要它们不是在创建时就相互引用（例如在created或mounted钩子中），通常不会有问题。Vue的响应式系统会确保只有在实际需要时才渲染相关组件。

2、解决方式：使用异步注册

//在组件中异步注册：在组件的beforeCreate钩子中，使用异步方式注册循环引用的组件，例如
beforeCreate(){
this.$options.components.componentName = () => import('./ComponentName.vue')
}

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。