组件的递归调用

开局一个参考文章：用Vue.js递归组件构建一个可折叠的树形菜单
虽然写得不是特别通俗易懂，但是看完我就写出来了！（感恩

一、场景

如果我们需要些一个根据所传数据动态生成的下拉列表，这是一个树状的结构，并且深度未知，那么肯定是不可写死的，我们需要动态地去递归生成一整个解构，毕竟每次深度都不一样。

二、分析

数据格式

首先我们来看看我们可以得到的数据，比如它是下面这个样子的：

let memus = {
  index: number
  icon: string
  title: string
  children: {
    index: number
    icon: string
    title: string  
    children:{
      .....
    }
  }
}

其中 children 是可以无限的。

递归条件

我们应该想到，在这里我们应该递归地去调用组件本身，只要还有 children，我们就把 children 当做一个新的数据传递给组件。那么结束的条件是什么呢？自然就是当前的 children 已经没有 children 了，所以我们可以用 v-if来进行判断，当然还有一种更聪明的做法，就是使用v-for遍历当前 children 的所有 children，下一个又继续这样去遍历，一层层，直到 children 没有 children 自动停止。

UI 优化

由于我们生成的是一个层级关系，合适的缩进可以使得呈现出来的数据可读性更强。这里直接贴一个参考文章中的代码吧，觉得很棒

1)  <my-menu :data="item.children" :depth="depth + 1"></my-menu>
2)  
3)  <span slot="title" :style="indent" style="display: inline-block">{{item.title}}</span>
4)  
5)  computed: {
6)              indent() {
7)                  return { transform: `translate(${this.depth * 20}px)` }
8)              }
9)          }

就是利用一个 depth ，并且在递归的过程中使得它自增，用这个数去控制当前行的缩进距离。十分聪明了！（仰慕
现在被我学来了哈哈哈哈哈哈哈哈

三、代码

贴一个我的代码
组件：

<template>
    <div>
        <el-submenu
                v-for="item of data"
                :key="item.index"
                :index="item.index"
                style="height: 100%"
                class="submenu"
                v-if="item.children">
            <template slot="title">
                <i v-if="item.icon" class="iconfont page-icon" v-html="item.icon"></i>
                <span slot="title" :style="indent" style="display: inline-block">{{item.title}}</span>
            </template>
            <my-menu :data="item.children" :depth="depth + 1"></my-menu>
            <div v-for="subItem of item.children" class="link item-group"
                 :key="subItem.index">
                <router-link :to="subItem.path" v-if="subItem.path">
                    <el-menu-item :index="subItem.index">
                        <span class="link-text" :style="indent">{{subItem.title}}</span>
                    </el-menu-item>
                </router-link>
            </div>
        </el-submenu>
    </div>
</template>

调用：

<my-menu :data="menus" :depth="0"></my-menu>