Vue元件遞迴

寫在前面
有時候我們需要樹狀選單，比如通訊錄的分組列表。在這時候資料是樹狀儲存的，給前端的資料需要進行遞迴讀取。這時候我們可以使用遞迴元件來進行渲染。

父元件引入程式碼

<tree-menu :treelist="list"></tree-menu>

遞迴元件

<template>
    <ul class="tree-menu">
        <li class="tree-li"  v-for="(item, index) in treelist" :key="index">
            <div class="my-border border-bottom">
                <i class="tree-icon"></i>
                <div class="tree-content">{{item.title}}</div>
            </div>
            <treemenu class="children" :treelist="item.children"
                      v-show="treelist[index].children">
            </treemenu>
        </li>
    </ul>
</template>
<script>
  export default {
    name: 'treemenu',
    data () {
      return {
      };
    },
    props: ['treelist'],
  };
</script>

模擬資料

{
  "ret": true,
  "data": {
    "list": [{
        "title": "成人票",
        "children": [{
          "title": "成人1館聯票",
          "children": [{
            "title": "成人1館聯票 - 某一連鎖店銷售"
          }]
        },{
          "title": "成人2館聯票"
        },{
          "title": "成人3館聯票",
          "children": [{
            "title": "成人3館聯票 - 某一連鎖店銷售"
          }]
        },{
          "title": "成人4館聯票"
        }, {
          "title": "成人5館聯票",
          "children": [{
            "title": "成人5館聯票 - 某一連鎖店銷售"
          }]
        },{
          "title": "成人6館聯票"
        }]
      }, {
        "title": "學生票"
      }, {
        "title": "兒童票"
      }, {
        "title": "特惠票"
      }]
  }
}