递归组件study

为什么要学习递归组件？

类似于这种多层级tree 还有多层级菜单 每一层的代码其实都是复制粘贴的 出现冗余代码

so 今天周六也闲

什么是递归组件：组件自己调用自己

在自身组件中使用自己 写法跟父组件中使用是一样的

根据数据结构 决定递归组件的位置

father 组件

<template>
  <div class="">
    <el-menu>
      <SideBar :list="sideBarData"></SideBar>
    </el-menu>
  </div>
</template>

<script>
import SideBar from "./son.vue";
export default {
  name: "",
  created() {},
  mounted() {},
  data() {
    return {
      // 这个是数据格式
      sideBarData: [
        {
          name: "菜单1",
          index: "menu1",
          icon: "el-icon-menu",
          children: [
            {
              name: "菜单1-1",
              index: "menu1-1",
              icon: "el-icon-menu",
              children: [
                {
                  name: "菜单1-1-1",
                  index: "menu1-1-1",
                  icon: "el-icon-menu",
                  children: [
                    {
                      name: "菜单1-1-1-1",
                      index: "menu1-1-1-1",
                      icon: "el-icon-menu",
                      children: [
                        {
                          name: "菜单1-1-1-1-1",
                          index: "menu1-1-1-1-1",
                          icon: "el-icon-menu",
                          children: [],
                        },
                        {
                          name: "菜单1-1-1-1-2",
                          index: "menu1-1-1-1-2",
                          icon: "el-icon-menu",
                          children: [],
                        },
                      ],
                    },
                    {
                      name: "菜单1-1-1-2",
                      index: "menu1-1-1-2",
                      icon: "el-icon-menu",
                      children: [],
                    },
                  ],
                },
                {
                  name: "菜单1-1-2",
                  index: "menu1-1-2",
                  icon: "el-icon-menu",
                  children: [],
                },
              ],
            },
            {
              name: "菜单1-2",
              index: "menu1-2",
              icon: "el-icon-menu",
              children: [],
            },
          ],
        },
        {
          name: "菜单2",
          index: "menu2",
          icon: "el-icon-document-copy",
          children: [
            {
              name: "数据集管理2",
              index: "dataset2",
              icon: "el-icon-document-copy",
              children: [],
            },
          ],
        },
        {
          name: "菜单2",
          index: "menu3",
          icon: "el-icon-folder",
          children: [],
        },
      ],
    };
  },
  components: {
    SideBar,
  },
  computed: {},
  methods: {},
};
</script>

<style lang="scss"  scoped>
</style>

son 组件

<template>
  <div>
    <template v-for="(item,index) in list">
　　　 <!-- 标题 -->
      <template v-if="item.children.length">
        <el-submenu :key="index" :index="item.index">
          <template :index="item.index" slot="title">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item-group>
            <sideBar :list="item.children"></sideBar>
          </el-menu-item-group>
        </el-submenu>
      </template>
　　　 <!-- 选项 -->
      <template v-else>
        <el-menu-item :key="index" :index="item.index">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </el-menu-item>
      </template>
    </template>
  </div>
</template>
<script>
export default {
  name: "sideBar",
  props: {
    list: Array
  }
};
</script>
<style></style>

推荐大佬写的:

blog.csdn.net/qq_31126175…

blog.csdn.net/qq_31126175…