问题的背景是菜单不能写死， 菜单要做成有权限的。 登陆完成之后， 获取权限列表， 根据权限列表的返回加载组件， 首先便是列表的展示， 列表不一定是单一的一层循环， 可能是有嵌套关系的。
总而言之， 徐然出来之后是一个树状结构。如下。
menus.png
组件的 循环引用 在表示一个树状结构的时候特别有用，比如一个菜单列表，除了数据的不同， 结构其实是一样的.
循环引用又分为自身引用 跟 组件之间互相引用。具体的写法上有些微的差异
我们接收到的数据可能是这样的
{
"success": true,
"data": [{
"meta": {
"name": "欧洲"
},
"name": "Europa",
"component": "/europa",
"path_": "/europa",
"children": [{
"meta": {
"name": "法兰西"
},
"name": "France",
"component": "/france",
"path_": "/france",
"children": [{
"meta": {
"name": "勃艮第"
},
"name": "burgundy",
"component": "/burgundy",
"path_": "/burgundy",
"children": null
}]
},
{
"meta": {
"name": "德意志"
},
"name": "Germany",
"component": "/germany",
"path_": "/germany",
"children": null
}
]
},
{
"meta": {
"name": "亚洲"
},
"name": "Asia",
"component": "/asia",
"path_": "/asia",
"children": null
}
]
}
这段数据如果要进行处理的话，比如说数据的属性 path_ 做成从父级别往下叠加的值是最好的， 但是在生成的时候没做。 因为有嵌套， 几乎肯定是要用递归函数去处理的， 说起来递归函数跟循环引用还是有那么一点点关系的， 处理的过程略；
代码准备分成三块, 第一块是数据的总的容器, 第二块是 数据具体的渲染 要用到 v-for 第三块是单个数据
即 index.vue sidebar-items.vue sidebar-item.vue
并且是 第一块引用第二块， 第二块引用第三块， 第三块引用第二块；如下
引用.png
sidebar-items 暴露出 itemData 的 props 作为数据的源. index.vue 提供总的数据源, sidebar-item 提供分支的数据源
