vue遍历组件-无限嵌套

组件的无限嵌套，相信大家在一些场景中应该都会用到，比如侧边栏导航、树形结构等等，今天我就来说下怎么实现组件的无限嵌套吧，很easy!

先来看一下很粗暴，但是很直观的效果图:

上面的效果图嵌套层级是不是很直观，嘿嘿!!!

想要实现组件的无限嵌套，就要做两个组件，实现原理就是在一个嵌套组件里，引入自己，这样子就可以实现无限的嵌套了。下面就来看看具体的代码吧!

第一个组件:

<template>
    <div class="tree">
        <tree-node v-for="(item, i) in datas" :key="i" :data="item" />
    </div>
</template>
<script>
import TreeNode from './TreeNode'
export default {
    data(){
        return {
            datas: [{"id":1,"name":"金字塔","description":"aaaa","pid":"0","path":"0","lock":1,"created_at":"2018-08-30","updated_at":"2018-08-30","childs":[{"id":2,"name":"金字塔1","description":"aaaa","pid":"1","path":"0-2","lock":0,"created_at":"2018-08-30","updated_at":"2018-08-30","childs":[{"id":5,"name":"金字塔1-1","description":"aaaa","pid":"2","path":"0-2-5","lock":0,"created_at":"2018-08-30","updated_at":"2018-08-30","childs":[{"id":8,"name":"金字塔1-1-1","description":"aaaa","pid":"5","path":"0-2-5-8","lock":0,"created_at":"2018-08-30","updated_at":"2018-08-30","childs":[{"id":10,"name":"金字塔1-1-1-1","description":"aaaa","pid":"8","path":"0-2-5-8-10","lock":0,"created_at":"2018-08-30","updated_at":"2018-08-30"}]}]},{"id":11,"name":"金字塔1-2","description":"aaaa","pid":"2","path":"0-2-11","lock":0,"created_at":"2018-08-30","updated_at":"2018-08-30","childs":[{"id":12,"name":"金字塔1-2-1","description":"aaaa","pid":"11","path":"0-2-11-12","lock":0,"created_at":"2018-08-30","updated_at":"2018-08-30"}]}]},{"id":3,"name":"金字塔2","description":"aaaa","pid":"1","path":"0-3","lock":0,"created_at":"2018-08-30","updated_at":"2018-08-30","childs":[{"id":6,"name":"金字塔2-1","description":"aaaa","pid":"3","path":"0-3-6","lock":0,"created_at":"2018-08-30","updated_at":"2018-08-30","childs":[{"id":9,"name":"金字塔2-1-1","description":"aaaa","pid":"6","path":"0-3-6-9","lock":0,"created_at":"2018-08-30","updated_at":"2018-08-30"}]}]}]}]
        }
    },
    components:{
        TreeNode
    }
}
</script>

第二个组件:

<template>
    <div>
        <p class="title">{{data.name}}</p>
	<!-- 无限嵌套的重点就是在这里啦-判断是否有子节点，有的话就遍历子节点 -->
        <template v-if="data.childs">
            <tree-node v-for="(item, i) in data.childs" :key="i" :data="item" />
        </template>
    </div>
</template>

<script>
export default {
    name: 'tree-node',
    props: ['data']
}
</script>

代码很简单，只是大家可能不知道组件还能自己引用自己吧!!!