乐趣区

关于vue.js:vue组件的递归自调用代码思路分析

问题形容

在咱们应用 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>

总结

递归还是比拟消耗性能的,所以要妙用,不能滥用。

退出移动版