Vue 递归组件

什么是递归？

程序调用自身的编程技巧称为递归（ recursion）。

构成递归需具备的条件：

• 化繁为简：子问题须与原始问题为同样的事，且更为简单；
• 出口：不能无限制地调用本身，须有个出口，化简为非递归状况处理。

以用 JavaScript 求解斐波那契数列作为例子，了解递归。

斐波那契数列的递推关系：

JavaScript 代码实现：

function fibonacci(n) {
    if (n === 0 || n === 1) {
        return n;  // 出口
    }
    return fibonacci(n - 1) + fibonacci(n - 2); // 化繁为简
}

通过对 JavaScript 代码进行 Debug，可以发现递归最重要的就是：1、化繁为简；2、出口。

化繁为简就是将问题分解；出口一定要有，如果没有出口或者调用层级过深都会导致 stack overflow。

---

什么是递归组件？

递归组件就是指组件在模板中调用自己。

递归都需要 化繁为简 和 出口 ，递归组件的化繁为简很简单，只需要指定组件的 name 属性即可；递归组件的出口也很简单，就是通过 v-if 指定递归的终点。

容器：

<template>
  <div>
    <recursion :tree="tree"></recursion>
  </div>
</template>

<script>
import recursion from '@/components/VueDataStream/recursion.vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
      tree: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1',
            children: [{
              label: '四级 1-1-1'
            }]
          }]
        }]   
      }]
    }
  },
  components: {
    recursion
  }
}
</script>

递归组件：

<template>
  <ul>
    <li v-for="item in tree" :key="item.label">
      <div>{{item.label}}</div>
      <recursion v-if="item.children" :tree="item.children"></recursion>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'recursion',
  props: {
    tree: {
      type: Array,
      default: () => []
    }
  }
}
</script>

---

递归组件有什么用？

Tree 树形控件

Cascader 级联选择器

参考

• 递归组件
• tree-node