前面接了一个面试电话，然后BOSS问我一个问题，问我什么是 递归组件 。我突然懵逼了，然后反问：“您说的是异步组件 component 吗？”，然后面试官就说：“是递归组件不是异步组件”。然后我就懵逼了~ wc这个我都没有听说过啊，然后的然后面试完后，我就抓紧时间查了一波资料。
递归
首先解释一下递归，懂递归的大牛请直接跳 异步组件 。正题： 递归 就是在自己调用自己。在我们js中的函数，可以使用递归的方式自己调用自己，需要注意的是，注意函数的终止逻辑避免死循环哦~
function recursion(num){
if(num === 1){
return num = 1;
}else{
// 通过调用自己实现递归
return num * recursion(num - 1)
}
}
recursion(5);递归组件
在vue中我们同样可以使用递归的方式，实现递归组件。但是我们需要使用非常非常关键的 name 属性。其实平常看别人写的代码里面都有些name，知道这一刻我才发现name的重要性。
调用组件
调用组件的地方，传入需要显示的组件，用于组件内部的递归使组件自己调用组件自己实现组件递归。
<template>
<div>
<Com :list="list"></Com>
</div>
</template>
<script>
import Com from "./Com";
export default {
components: {
Com
},
data() {
return {
list: [
{
name: "主页",
children: [{ name: "文章"},{ name: "图片" }]
},
{
name: "编程",
children: [{ name: "css" }, { name: "js" }, { name: "vue" }]
}
]
};
}
};
</script>定义组件
我们通过 props 来接受传过来的参数，使用递归方式让组件自己调用自己
<template>
<div>
<div v-for="item in list" class="item" :key="item">
<!-- 显示首行 -->
<span>{{item.name}}</span>
<div v-if="item.children">
<!-- 存在children的话显示children -->
<div v-for="child in item.children" :key="child" class="child">
<span>{{child.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "com",
props: {
list: {
type: Array
}
}
};
</script>
<style scoped>
.item {
font-weight: bold;
}
.child {
font-weight: normal;
text-indent: 2em;
}
</style>小弟初来驾到，各位大佬勿喷，有什么不对的希望大佬指出来，感谢~
