Implementation effect
Parent component call:
<template> <div> <div class="prent"> {{title + "+ custom "}} </div> </template> </Tree> </div> </template> <script> import Tree from "./tree.vue"; Export default {components: {Tree,}, data() {return {data: [{title: "parent ", children: [{title:" parent ", children: [{title: "parent ", children: [{title:" parent "] "Son," the children: [] {the title: "sun",}}],}, {title: "father is 2", the children: [] {the title: "the child"}}}; }}; </script>Recursive components
<template> <div class="tree"> <div v-for="item of data" :key="item.title"> <! <div class="title" > <! - slot - > < slot: title = "item. The title" > {{item. The title}} < / slot > < / div > <! --> <Tree v-if="item.children" :data='item.children' > <! -- Item scope slot for each child --> <template v-slot="item"> <! <slot :title='item.title' /> </template> </Tree> </div> </div> </template> <script> <script> export default { name: 'Tree', props: { data: Array, } }; </script> <style scoped> .tree{ padding-left: 10px; } ul,li{ list-style: none; margin: 0; padding: 0; } </style>