vue无限级tree树状结构组件代码

<template>
<div class="main float-right">
    <recursionchild :total="data"></recursionchild>  
</div>
</template>
<script>
    import recursionchild from 'child.vue'
    export default {
        components: {
            recursionchild
        },
        data: () => ({
            data:[
                    {
                        "name":"aa",
                        "child":[
                            {"name":"aa-1"},
                            {"name":"aa-2"},
                            {"name":"aa-3",
                             "child":[
                                {"name":"aa-3-1"},
                                {"name":"aa-3-2"},
                                {"name":"aa-3-3"},
                                ]
                            },
                        ]
                    },
                    {
                        "name":"bb",
                        "child":[
                            {"name":"bb-1"},
                            {"name":"bb-2",
                             "child":[
                                {"name":"bb-2-1"},
                                {"name":"bb-2-2"},
                                {"name":"bb-2-3"},
                                ]
                            },
                            {"name":"bb-3"},
                        ]
                    },
                ]
        }),
    }
</script>

<template>
 <ul>
    <li v-for="(item,index) in total">
        <span>{{item.name}}</span>
        <recursionchild :total="item.child"></recursionchild>
    </li>
</ul>
</template>
<script>
	export default {
		name: 'recursionchild',
		props:{
            total:Array
        } ,
	}
</script>