组件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>

调用

<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: "形状",
      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>

报内存栈溢出，在组件内加个div就不报了，why???

写法：www.jianshu.com/p/e2493b3fd… 不报错，但是得重新调整样式