vue递归组件

//父组件
<template>
    <div>
        <digui :label="data.label" :children="data.nodes" :depth="depth"></digui>
    </div>
</template>

<script>
    import digui from "@/components/yuchunhui/digui"
    export default {
        name: "two",
        components:{
            digui
        },
        data(){
            return{
                depth:0,
                data:{
                    label: 'root',
                    nodes: [
                        {
                            show:false,
                            label: 'item1',
                            nodes: [
                                {
                                    label: 'item1.1'
                                },
                                {
                                    show:false,
                                    label: 'item1.2',
                                    nodes: [
                                        {
                                            label: 'item1.2.1'
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            label: 'item2'
                        }
                    ]
                }
            }
        }
    }
</script>

<style scoped>

</style>

//子组件
<template>
    <div>
        <!--缩进-->
        <div :style="indent">
            <!--如果有孩子显示开关-->
            <button v-if="children && children.length > 0" @click="toggleChildren">开关</button>
            <div>{{ label }}</div>
        </div>

        <!--是否展示子组件-->
        <div  v-show="showChildren">
            <!--如果有字列表并且长度不为0-->
            <div v-if="children && children.length > 0">
                <digui
                        v-for="item in children"
                        :key="item.label"
                        :children="item.nodes"
                        :label="item.label"
                        :depth="depth + 1">
                </digui>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "digui",
        props:["label","children","depth"],
        data(){
            return{
                showChildren: false
            }
        },
        methods: {
            toggleChildren() {
                this.showChildren = !this.showChildren;
            }
        },

        computed: {
            indent() {
                return { transform: `translate(${this.depth * 50}px)` }
            }
        }
    }
</script>

<style scoped>

</style>