Moment For Technology

Vue Recursive component scope slot

Posted on Aug. 11, 2023, 6:04 a.m. by Thomas Hutchinson
Category: javascript Tag: javascript html vue.js The front end

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
About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.