Vue Recursive component scope slot

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