什么是递归？递归组件实现可折叠的树形菜单？？

• 递归
  递归就是一个函数在它的函数体内调用它自身。执行递归函数将反复调用其自身，每调用一次就进入新的一层。递归函数必须有结束条件。

  当函数在一直递推，直到遇到墙后返回，这个墙就是结束条件。

所以递归要有两个要素，结束条件与递推关系。

递归有两个基本要素：
（1）边界条件：确定递归到何时终止，也称为递归出口。

（2）递归模式：大问题是如何分解为小问题的，也称为递归体。递归函数只有具备了这两个要素，才能在有限次计算后得出结果 。

• 可折叠的树形菜单
  类似于：
  
  代码：
  父组件中的：

<template>
  <div>
    <Tree :tit="treeObj.name" :list="treeObj.children" :depth="0"></Tree>
  </div>
</template>
<script>
import Tree from "@/views/Tree"
// 模拟得树形结构
let treeObj = {
  name: '电子产品',
  children: [
    {
      name: '电视',
      children: [
        {
          name: 'philips',
          children: [
            { name: 'philips-A' },
            { name: 'philips-B' }
          ]
        },
        { name: 'Tcl' },
        { name: '海信' }
      ]
    },
    {
      name: '电脑',
      children: [
        { name: 'Mac Air' },
        { name: 'Mac Pro' },
        {
          name: 'ThinkPad',
          children: [
            { 
              name: 'ThinkPad-A',
              children:[
                {name:'ThinkPad-A-A'},
                {name:'ThinkPad-A-B'},
                {name:'ThinkPad-A-C'},
            ] },
            { name: 'ThinkPad-B' }
          ]
        }
      ]
    },
    {
      name: '可穿戴设置',
      children: [
        {
          name: '手表',
          children: [
            { name: 'iWatch' },
            { name: '小米watch' }
          ]
        }
      ]
    }
  ]
}
export default {
  name: "One",
  components: { Tree},
  data() {
    return {
      treeObj
    };
  },
};
</script>

子组件中的

<template>
  <div>
    <div>
      <h3 :style="indent" class="change">
        <p @click="toggle">{{isShow?"-":"+"}}</p> 
        <p>{{tit}}</p>
      </h3>
    </div>
    <div v-if="isShow">
      <Tree
        v-for="(item,key) in list"
        :key="key"
        :depth="depth+1"
        :tit="item.name"
        :list="item.children"
      ></Tree>
    </div>

    <!-- 不用递归得方法 -->
    <!-- <ul>
      <li v-for="(item,key) in list" :key="key">
        <p>{{item.name}}</p>
        <div v-for="(item,key) in item.children" :key="key">
          <p>{{item.name}}</p>
          <div v-for="(item,key) in item.children" :key="key">
            <p>{{item.name}}</p>
          </div>
        </div>
      </li>
    </ul>-->
  </div>
</template>
<script>
export default {
  name: "Tree", // 通过组件自身得name名来实现组件得递归调用
  data() {
    return {
      isShow: true
    };
  },
  props: {
    tit: {
      type: String,
      default: "名称"
    },
    list: {
      type: Array
    },
    depth: {
      type: Number,
      default: 0
    }
  },
  computed: {
    indent() {
      return `transform:translate(${this.depth * 20}px)`;
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    }
  }
};
</script>
<style lang="scss">
hr {
  margin: 20px 0;
}
.change {
  display: flex;
}
</style>

提示：depth就是递归终止的层数（条件）