十四、实现无限级递归

数据：

const initData = [    {        name: 'IT互联网',        child: [            {name: '前端开发', child: [{name: 'vue'}, {name: 'react'}]},
            {name: '移动开发', child: [{name: 'android'}, {name: 'ios'}]},
            {name: '游戏开发', child: [{name: 'webGL游戏开发', child: [{name: '3D游戏'}, {name: '2D游戏'}]}, {name: 'phaser游戏开发'}]}
        ]
    }, 
    {
        name: '升学考研',
        child: [
            {name: '考研'},
            {name: '大学'},
            {name: '高中'},
            {name: '初中'},
        ]
    },
    {
        name: '职企考证',
        child: [
            {name: '公务员', child: [{name: '教师考试'}]},
        ]
    }
]

使用js：

 window.onload = function (){
            // function fn(data) {
            //     let str = '<ul>'
            //     for (let i = 0, len = data.length; i < len; i++) {
            //         const item = data[i]
            //         str += `
            //             <li>${item.name}</li>
            //         `
            //         if (item.child) {
            //             str += fn(item.child)
            //         }
            //     }
            //     str+='</ul>'
            //     return str
            // }
            function fn(data) {
                return `
                    <ul>
                        ${
                            data.map(item => (
                               `<li>${item.name}${item.child ? fn(item.child) : ''}</li> `  
                            )).join('')
                        }
                    </ul>
                `
            }
            document.querySelector('body').innerHTML = fn(initData)
        } 

使用vue

STEP1 在引用组件中

<template>
    <div>
        下面是递归树：
        <TreeNode :config="initData"></TreeNode>
    </div>
</template>

<script>
import TreeNode from './recursion/TreeNode.vue'
export default {
    data() {
        return {
            initData: [
                {
                    name: 'IT互联网',
                    child: [
                        { name: '前端开发', child: [{ name: 'vue' }, { name: 'react' }] },
                        { name: '移动开发', child: [{ name: 'android' }, { name: 'ios' }] },
                        { name: '游戏开发', child: [{ name: 'webGL游戏开发', child: [{ name: '3D游戏' }, { name: '2D游戏' }] }, { name: 'phaser游戏开发' }] }
                    ]
                },
                {
                    name: '升学考研',
                    child: [
                        { name: '考研' },
                        { name: '大学' },
                        { name: '高中' },
                        { name: '初中' },
                    ]
                },
                {
                    name: '职企考证',
                    child: [
                        { name: '公务员', child: [{ name: '教师考试' }] },
                    ]
                }
            ]
        }
    },
    components: {
        TreeNode
    }

}
</script>

STEP2 在TreeNode中

<template>
    <div class="tree">
        <TreeItem :config="config"></TreeItem>
    </div>
</template>

<script>
import TreeItem from './TreeItem.vue'
export default {
    props: {
        config: {
            type: Array,
            default: () => []
        }
    },
    components: {
        TreeItem
    }
}
</script>

STEP3 在treeItem中

<template>
    <ul>
        <li v-for="(item, i) in config"
            :key="i">
            {{item.name}}
            <TreeItem :config="item.child"></TreeItem>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'TreeItem',
    props: {
        config: {
            type: Array,
            default: () => []
        }
    },

}
</script>

<style>
ul {
    padding-left: 20px;

}
li {
    padding-left: 10px;
}
</style>