Vue组件自调用概念
Vue组件中必须使用name属性才可以自己调用自己
<template><div>内容<my-nav/></div></template><script>export default {name: "MyNav"}</script>
无限递归导航概念
就是简单的递归，配合v-for，v-if来实现，后面有代码
element-ui导航封装
先看看官方网站的案例Element - The world's most popular Vue UI framework
代码：
父组件中调用子组件传递值demo的数据是手写的json，在后面有写
父组件代码
<template><div class="RecursiveNav"><h1>无限递归导航</h1><el-menu class="el-menu-vertical-demo"><MyNav :nav="nav" /></el-menu></div></template><script>import MyNav from "@/components/nav/Nav.vue";export default {components: { MyNav },data() {return {nav: null,};},mounted() {this.nav = require("@/components/nav/nav.json");},};</script><style scoped>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}</style>
子组件组件实现组件自调用
子组件代码
<template><div class="nav"><div v-for="(item, index) in nav" :key="index"><!-- children 判断是否需要递归 --><el-submenu:index="item.index"v-if="item.children && item.children.length > 0"><!-- 导航可折叠 item.group判断是否有内容--><template slot="title" v-if="!item.group"><i :class="item.icon"></i><span slot="title">{{ item.title }}</span></template><!-- 内容 --><el-menu-item-group v-else><span slot="title">{{ item.group }}</span><el-menu-item :index="item.index">{{ item.title }}</el-menu-item></el-menu-item-group><!-- 递归 --><my-nav :nav="item.children" /></el-submenu><!-- 一级导航（不可折叠） --><el-menu-item :index="item.index" v-else-if="item.type === 1"><i :class="item.icon"></i><span slot="title">{{ item.title }}</span></el-menu-item><!-- 没有可以折叠的内容（最底层） --><el-menu-item-group v-else><span slot="title">{{ item.group }}</span><el-menu-item :index="item.index">{{ item.title }}</el-menu-item></el-menu-item-group></div></div></template><script>export default {name: "MyNav",props: ["nav"],};</script><style scoped></style>
json数据
[{"index": "1-1","type": 1,"title": "一级导航","icon": "el-icon-location","children": [{"index": "2-1","type": 2,"title": "二级导航","icon": "el-icon-location","children": [{"index": "3-1","type": 3,"group": "分组三","title": "三级导航","icon": "el-icon-location"}]},{"index": "2-2","type": 2,"title": "二级导航","icon": "el-icon-location","children": [{"index": "3-3","type": 3,"group": "分组三","title": "三级导航","icon": "el-icon-location"},{"index": "3-2","type": 3,"title": "三级导航","icon": "el-icon-location","children": [{"index": "4-1","type": 4,"group": "分组四","title": "四级导航","icon": "el-icon-location"},{"index": "4-2","type": 4,"group": "分组四","title": "四级导航","icon": "el-icon-location"}]}]}]},{"index": "1-2","type": 1,"title": "一级导航","icon": "el-icon-location","children": [{"index": "2-3","type": 2,"group": "分组二","title": "二级导航","icon": "el-icon-location"}]},{"index": "1-3","type": 1,"title": "一级导航","icon": "el-icon-location"}]
这边提供Gitee的地址：/sk2008/gather/tree/master
后续也会有其他的demo人在里面
