动态侧边菜单栏(多级)

干货内容：

动态侧边菜单栏(多级)的用法以及name的作用

1、动态侧边菜单栏(多级)

效果展示：

navbar组件的代码示例

<template>
  <div>
    <!-- 侧边菜单组件-->
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :unique-opened="true"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <MenuTree :Menu="Menu"></MenuTree>
    </el-menu>
  </div>
</template>

<script>
import MenuTree from "@/components/MenuTree";
import { RouteList } from "@/request/api";
export default {
  components: {
    MenuTree
  },
  data() {
    return {
      Menu: [
        {
          id: 1,
          parentid: "0",
          name: "监控中心",
          icon: "HomeFilled",
          url: "/homepage"
        },
        {
          id: 2,
          parentid: "0",
          name: "运营中心",
          icon: "UserFilled",
          children: [
            {
              id: 3,
              parentid: "2",
              name: "信息管理",
              icon: "",
              children: [
                {
                  id: 4,
                  parentid: "2",
                  name: "密码修改",
                  icon: "",
                  children: [
                    {
                      id: 5,
                      parentid: "2",
                      name: "密码修改1111",
                      icon: "",
                      url: "/password",
                    }
                  ]
                }
              ]
            },
            {
              id: 8,
              parentid: "2",
              name: "资源中心",
              icon: "",
              url: "/grade"
            }
          ]
        },
        {
          id: 9,
          parentid: "0",
          name: "咨询中心",
          icon: "List",
          url: "/course"
        }
      ]
    };
  },
  methods: {

    // 也可以接收后端传过来的json数据 获取侧边菜单栏数据
    getList() {
      RouteList().then(res => {
        console.log("侧边菜单栏", res);
        this.Menu = res.data.data;
      });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style>
</style>

MenuTree组件的代码示例

<template>
  <div>
    <template v-for="(item,index) in Menu">
      <!-- 有子级菜单的循环 -->
      <el-submenu :index="item.id + ''" v-if="item.children && item.children.length>0">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ item.name }}</span>
        </template>
        <!-- 递归，实现无限极的子级循环 -->
        <MenuTree :Menu="item.children"></MenuTree>
      </el-submenu>
      <!-- 没有子级菜单的循环 -->
      <el-menu-item :index="item.id + ''" v-if="!item.children">
        <i class="el-icon-location"></i>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  // 这个必填，自己调用自己的时候才能找到当前组件
  name: "MenuTree",
  props: {
    Menu: {
      type: Array,
      default: []
    }
  },
  data() {
    return {};
  }
};
</script>

<style>
</style>

2、name的作用

在Vue.js组件中，name 选项用来指定组件的名称。作用有以下几点:
1、调试时显示名称:当在开发者工具中查看组件树时，name选项可以帮助你更容易地识别和定位组件。组件的名称会显示在开发者工具的组件树中，有助于调试和定位问题。

2、递归组件中的自引用:在递归组件中，如果需要在组件内部引用自身(比如树形结构的菜单)，需要为组件指定name ，以便在组件内部进行递归引用。

3、动态组件的标识:在一些动态组件的场景中，name可以作为判断当前渲染的组件类型的标识。通过判断组件的name，可以实现动态组件的切换和控制。

总之，name选项在vue.js组件中起到标识组件名称、调试和递归引用等作用。虽然在一些简单的组件中可以省略name选项，但在一些复杂的场景中，为组件指定一个名称是一个良好的实践