1、两个组件相互引用导致的报错,代码如下:
<!-- Component A -->
<template>
<div>
{{ message }}
<B />
</div>
</template>
<script>
import B from './B.vue';
export default {
components: { B },
data() {
return {
message: 'Hello from A'
};
}
};
</script>
<!-- Component B -->
<template>
<div>
{{ message }}
<A />
</div>
</template>
<script>
import A from './A.vue';
export default {
components: { A },
data() {
return {
message: 'Hello from B'
};
}
};
</script>
在这种情况下,虽然它们循环引用,但只要它们不是在创建时就相互引用(例如在created或mounted钩子中),通常不会有问题。Vue的响应式系统会确保只有在实际需要时才渲染相关组件。
2、解决方式:使用异步注册
//在组件中异步注册:在组件的beforeCreate钩子中,使用异步方式注册循环引用的组件,例如
beforeCreate(){
this.$options.components.componentName = () => import('./ComponentName.vue')
}