这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战
一直以来，我有点害怕递归，打心里有点慌张，总感觉自己逻辑不好，不敢去尝试，今天再看iview 步骤条的时候突发奇想，外加同事说有个新功能打算用步骤条，不过是下图这样的，我个人感觉像tree hhhh～～～ 让我们一起来看看吧～～～
什么是递归组件
递归组件，顾名思义，就是自己的内部实现又调用自己的组件。比如Vue官方给的treeView的例子，父目录下有子目录，子目录下还有子目录，子子孙孙，无穷尽也。就像俄罗斯套娃。
递归组建的两个条件 其实，除了前面所说的name选项是必须的之外，还有一点也是在实现递归组件要注意的，就是要防止无限递归，造成调用栈溢出。上面说的子子孙孙，无穷尽也，说说可以，可是浏览器受不了啊。这就要根据实际场景来分析递归的终止条件。简化就是下面两句话。
- 组件有name属性
- 递归调用需要有条件
- 组建不需要再用components属性去声明自己了，有了name属性后直接在template中就可以调用名为name值的组件
父组件
<div class="hello">
<Tsteps :list="stepsdata"></Tsteps>
</div>
模拟的数据如下图
子组件
template>
<Steps :current="list.length" direction="vertical">
<step v-for="item in list" icon="ios-camera" :key="item.key" :title="item.title" >
<Tsteps :list="item.children"></Tsteps>
</step>
</Steps>
</template>
<script>
export default {
name:'Tsteps',
props: {
list: { // 所有树节点
type: Array,
default: () => {
return []
}
}
}
}
</script>
总结，其实有时候是心理作用，了解原理，然后整理思路，一步步跟着思路去写，而不要轻易的否定自己嗷～～～踏出第一步，就是成功了三分之一，前端道路很长，继续努力加油～～～～
