Vue组件之间循环引用报错问题分析
- 如果两个组件嵌套引用,ChildOne->引用ChildTwo,ChildTwo又引用ChildOne,则会报错:未知的ChildOne,如下图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201125225640314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhbG00Mjg=,size_16,color_FFFFFF,t_70#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://img-blog.csdnimg.cn/20201125230505591.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhbG00Mjg=,size_16,color_FFFFFF,t_70#pic_center)
- 解决方法,在实际开发中,我是讲第二个组件中嵌套的第一个组件移除,去掉循环嵌套关系。
- 补充:嵌套引用编译时报错——堆空间最大值引用,只有编译的时候会出现
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201125230038911.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhbG00Mjg=,size_16,color_FFFFFF,t_70#pic_center)