Vue组件之间循环引用报错问题分析
- 如果两个组件嵌套引用,ChildOne->引用ChildTwo,ChildTwo又引用ChildOne,则会报错:未知的ChildOne,如下图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6b60bb73c6f1ac046bdf5cf263fce5dc.png#pic_center)
<template>
<div class="app-container">
<div class="child-one">
<ChildTwo></ChildTwo>
</div>
<!-- <ChildThree></ChildThree>-->
</div>
</template>
<script>
import ChildTwo from "@/views/ChildTwo";
export default {
name: "ChildOne"
,
components: {
ChildTwo
}
}
</script>
<style scoped>
.child-one {
width: 200px;
height: 200px;
background-color: red;
color: white;
font-weight: bolder;
text-align: center;
display: flex;
line-height: 200px;
}
</style>
<template>
<div class="app-container">
<div class="child-two">
<ChildOne></ChildOne>
</div>
</div>
</template>
<script>
import ChildOne from "@/views/ChildOne";
export default {
name: "ChildTwo",
components: {
ChildOne
}
}
</script>
<style scoped>
.child-two {
width: 200px;
height: 200px;
background-color: yellow;
color: brown;
font-weight: bolder;
text-align: center;
display: flex;
line-height: 200px;
}
</style>
- 运行时截图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/43385e253de9bb4e250b98dc7fd18402.png#pic_center)
- 解决方法,在实际开发中,我是讲第二个组件中嵌套的第一个组件移除,去掉循环嵌套关系。
- 补充:嵌套引用编译时报错——堆空间最大值引用,只有编译的时候会出现
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6f20429e0a80cc7f8f67601da154149c.png#pic_center)