问题形容
在咱们应用vue开发我的项目时，有时候须要用到递归思维去书写代码。在一些UI组件中，咱们也能够看到其中使用了递归的思维。比方：饿了么UI中的el-tree组件、el-menu组件（动静菜单栏）、el-Cascader组件。所以本文就举个简略的例子，来记录一下递归思维，在vue组件中的应用。
什么是递归
咱们晓得，一个函数能够调用别的函数，让别的函数执行；而递归就是：某个函数不去调用别的函数了，只调用本人，让本身函数始终执行。
当然如果始终执行的话，会导致栈溢出问题，所以递归须要有一个完结的条件，当达到这个条件的时候，就让函数不再调用本身，就停下来即可。感觉和循环有点相似
递归、循环、死循环的了解
- 递归：有限套娃，当找到某个娃娃时，就不套了
- 循环：始终套娃，要把所有的娃娃都套了一遍，才停止下来不套了
- 死循环：始终套娃，然而娃娃始终套不完
这里是我集体的简略了解，具体区别，以官网为准
vue组件中应用递归
效果图
代码局部
App.vue组件入口页面代码
<template> <div> <!-- 传递数据到用来做递归的组件 --> <tree :data="data"></tree> </div></template><script>// 引入递归组件import tree from "./tree.vue";export default { name: "App", components: { tree }, // 注册递归组件 data() { return { /* 假如data是咱们向后端发申请获取的数据， 咱们须要把这个数据通过props的形式传递给用来做递归组件的.vue文件 这里要留神一下数据字段构造（理论工作中这里须要和后端磋商定规定） */ data: [ { name: "西游记", children: [ { name: "孙悟空", children: [ { name: "筋斗云", }, { name: "金箍棒", }, { name: "紧箍咒", }, ], }, { name: "沙和尚" }, { name: "白龙马" }, { name: "唐僧" }, ], }, { name: "三国演义", children: [ { name: "刘备" }, { name: "关羽", children: [ { name: "一技能" }, { name: "二技能" }, { name: "大招" }, ], }, { name: "张飞", }, { name: "小鲁班", children: [ { name: "福禄兄弟" }, { name: "木偶奇遇记" }, { name: "电玩小子" }, { name: "星空幻想" }, { name: "狮舞西方" }, { name: "乒乓小将" }, ], }, ], }, { name: "水浒传", children: [ { name: "宋江" }, { name: "鲁智深" }, { name: "武松", children: [ { name: "喝酒", }, { name: "打老虎", }, ], }, ], }, ], }; },};</script>tree.vue递归组件中的代码
正文如下图：
代码如下：
<template> <ul> <li v-for="(item, index) in data" :key="index"> {{ item.name }} <!-- 在遍历时递归调用组件本身，当然，要有children，有数据的时候才去递归调用本身(递归须要有一个完结条件) --> <template v-if="item.children"> <tree :data="item.children"></tree> <!-- 因为组件调用渲染，须要有数据，而这个tree.vue组件是的数据是通过props接管的， 所以须要把子内容数据再传递给子组件，子组件用props接管，就可能一层一层的渲染了 --> </template> </li> </ul></template><script>export default { name: "tree", props: { data: { type: Array, default() { return []; }, }, },};</script>总结
递归还是比拟消耗性能的，所以要妙用，不能滥用。