<template>
  <div class="navMenu">

    <template v-for="navMenu in navMenus">
      <!-- 最后一级菜单 -->
      <el-menu-item v-if="!navMenu.children" :key="navMenu.id" :data="navMenu"
        :index="navMenu.id+''">
        <span slot="title">{{ navMenu.label }}</span>
      </el-menu-item>

      <!-- 此菜单下还有子菜单 -->
      <el-submenu v-if="navMenu.children" :key="navMenu.id" :data="navMenu"
        :index="navMenu.id+''">
        <template slot="title">
          <span> {{ navMenu.label }}</span>
        </template>
        <!-- 递归 -->
        <NavMenu :navMenus="navMenu.children"></NavMenu>
      </el-submenu>
    </template>

  </div>
</template>

<script>

// import NavMenu from "./NavMenu.vue";
export default {
  name: 'NavMenu',
  props: ['navMenus'],
  // components: { NavMenu },
  data() {
    return {}
  },
  methods: {},
  activated() {
    console.log(11111111111) 
    console.log(this.navMenus)
  },

};
</script>

<style>
/* @import "../../assets/styles/navMenu.scss"; */
/* 水平样式 */

</style>