問題的背景是菜單不能寫死， 菜單要做成有權(quán)限的。 登陸完成之后， 獲取權(quán)限列表， 根據(jù)權(quán)限列表的返回加載組件， 首先便是列表的展示， 列表不一定是單一的一層循環(huán)， 可能是有嵌套關(guān)系的。
總而言之， 徐然出來之后是一個樹狀結(jié)構(gòu)。如下。

menus.png

組件的 循環(huán)引用 在表示一個樹狀結(jié)構(gòu)的時候特別有用，比如一個菜單列表，除了數(shù)據(jù)的不同， 結(jié)構(gòu)其實是一樣的.
循環(huán)引用又分為自身引用 跟 組件之間互相引用。具體的寫法上有些微的差異

我們接收到的數(shù)據(jù)可能是這樣的

{
  "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
    }
  ]
}

這段數(shù)據(jù)如果要進(jìn)行處理的話，比如說數(shù)據(jù)的屬性 path_ 做成從父級別往下疊加的值是最好的， 但是在生成的時候沒做。 因為有嵌套， 幾乎肯定是要用遞歸函數(shù)去處理的， 說起來遞歸函數(shù)跟循環(huán)引用還是有那么一點點關(guān)系的， 處理的過程略；
代碼準(zhǔn)備分成三塊, 第一塊是數(shù)據(jù)的總的容器, 第二塊是 數(shù)據(jù)具體的渲染 要用到 v-for 第三塊是單個數(shù)據(jù)
即 index.vue sidebar-items.vue sidebar-item.vue
并且是 第一塊引用第二塊， 第二塊引用第三塊， 第三塊引用第二塊；如下

引用.png