vue 实现组件递归
主要使用到了 组件中的name, 当我们设置了组件的name，组件递归调用自身使用的组件名为name；
例子
// 递归组件 demo.vue
<template>
<div>
<div v-for="(item, index) in treeData" :key="index">
<p>{
{
item.title }}</p>
<div class="children" v-if="item.children">
<!-- 嵌套自身 -->
<Demo :treeData="item.children"></Demo>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Demo",
props: ["treeData"],
data() {
return {
};
},
created() {
},
};
</script>
<style scoped>
.children {
padding-left: 10px;
}
</style>
父组件调用demo.vue
<demo :treeData="treeData" ></demo>
// 模拟递归
treeData: [
{
title: "递归层1",
children: [
{
title: "递归层1-1",
children: [
{
title: "递归层1-1-1",
},
{
title: "递归层1-2-1",
children: [
{
title: "递归层1-2-1-1",
},
{
title: "递归层1-2-1-2",
},
],
},
],
},
{
title: "递归层1-2",
},
],
},
],
效果
