今天在阅读vue文档的时候，发现还有一个递归组件，平时没有注意到。递归组件就是在自己组件的模板中调用自己，此时组件的name属性就尤为重要了。
稍有不慎，递归组件就可能导致无限循环，将会导致“max stack size exceeded”错误，所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。
举个例子：假如要将下列数据的name渲染出来，那么就可以使用递归组件完成
list: [
{
name: "海贼王",
children: [
{
name: "卡普",
children: [
{
name: "龙",
children: [
{
name: '路飞'
}
]
}
],
},
],
},
],
然后我们创建一个名为recursion.vue的组件
<template>
<div>
<div class="list" v-for="(item, index) in list" :key="index">
<p>{{ item.name }}</p>
/* 这是在组件的内部，这个组件的名字必须与下面的name属性的名字一致，首字母大小写都可以 */
<recursion :list="item.children"></recursion>
</div>
</div>
</template>
<script>
export default {
name: "recursion",
props: {
list: Array,
},
};
</script>
<style scoped>
.list{
text-align: center;
}
</style>
然后使用组件，
<template>
<div>
<Recursion :list="list"></Recursion>
</div>
</template>
<script>
// 这里导入的时候命名和recursion.vue内部的name属性是不冲突的，可以自由命名
import Recursion from "../components/recursion.vue";
export default {
components: {
Recursion,
},
data() {
return {
list: [
{
name: "海贼王",
children: [
{
name: "卡普",
children: [{ name: "龙", children: [{ name: '路飞' }] }],
},
],
},
],
};
},
};
</script>
递归组件.png
符合预期，控制无报错
