Component navMenu. Vue

<template> <el-menu-item v-if="! item.children" :index="item.key" :route="item.path"> <template slot="title">{{ item.name }}</template> </el-menu-item> <el-submenu v-else :index="item.key" :data="item"> <template slot="title"> <i class="el-icon-menu"></i> <span slot="title"> {{ item.name }}</span> </template> <template v-for="(item2, index) in item.children"> <NavMenu :key="index" :item="item2"></NavMenu> </template> </el-submenu> </template> <script> export default { name: "NavMenu", props: ["item"], }; </script>Copy the code

call

<template> <el-menu default-active="0" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <template v-for="(item, index) in menuList"> <NavMenu :key="index" :item="item"></NavMenu> </template> </el-menu> </template> <script> import NavMenu from "./component/navMenu"; Export default {components: {NavMenu}, data() {return {menuList: [{name: "shape", path: "/shape", key: "0", children: [ { name: "border", path: "/shape/border", key: "0-1", children: [ { name: "border", path: "/shape/border", key: "0-1-1" }, { name: "transform", path: "/shape/transform", key: "0-2-2" } ] }, { name: "transform", path: "/shape/transform", key: "0-2" } ] }, { name: "animation", path: "/border/animation", key: "1"}}; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); }}}; </script>Copy the code

Memory stack overflow is reported, adding a div to the component is not reported.

Writing: www.jianshu.com/p/e2493b3fd… No errors, but restyles are required