问题描述
在我们使用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>
总结
递归还是比较耗费性能的,所以要妙用,不能滥用。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。