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": "特惠票"
      }]
  }
}