递归组件

1、日常开发中，遇到需要自定义递归组件的需求，该示例为一个简单的递归示例组件。

在这个示例中，RecursiveComponent组件接收一个名为node和setYear的 prop，该 prop 包含两个数据，node 对象中包含name属性表示节点名称，children属性表示子节点数组。setYear为业务年度，组件会递归地渲染每个节点及其子节点。

注意：递归组件中，需要把组件所有需要的数据都传递下去。例如：该组件的中的node和setYear在组件上都需要传递下去

<template>
  <div>
    <span>{{ node.name }}</span>
    <template v-if="node.children && node.children.length">
      <recursive-component v-for="(child, index) in node.children" :key="index" :node="child" :set-year="setYear" />
    </template>
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent',
  props: {
    /**
     * 递归渲染阶段数据
    * */
    node: {
      type: Object,
      default: {},
    },
    /**
     * 业务年度
    * */
    setYear: {
      type: String,
      default: ''
     },
  }
}
</script>