vue 组件循环引用

问题的背景是菜单不能写死， 菜单要做成有权限的。 登陆完成之后， 获取权限列表， 根据权限列表的返回加载组件， 首先便是列表的展示， 列表不一定是单一的一层循环， 可能是有嵌套关系的。
总而言之， 徐然出来之后是一个树状结构。如下。

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 提供分支的数据源