elemenet-ui菜單遞歸組件的二次封裝

<!--leftMenu.vue-->
<el-menu
      
        router
        unique-opened
        :default-active="leftMenuActive"
        mode="vertical"
        background-color="#324157"
        text-color="#bfcbd9"
        active-text-color="#20a0ff"
      >
        <app-menu-item v-for="item in menuData" :dd="item" :key="item.path"></app-menu-item>
</el-menu>

<script>
import AppMenuItem from "@/components/common/AppMenuItem";
export default{
    data(){
        return {
            menuData:[],
        }
    },
    components: {
        AppMenuItem,        
    },
}
</script>

<!--AppMenuItem.vue-->
<template>
  <el-submenu v-if="dd.type == 'submenu' " :index="dd.path">
    <template slot="title">
        <i :class="dd.icon"></i>{{ dd.text }} 
        <span v-if="map[dd.path] != undefined">({{ getCount(dd.path) }})</span>
    </template>
    <template v-if="forChildren(dd)">
        <app-menu-item v-for="item in dd.children" :key="item.path" :dd="item"></app-menu-item>
    </template>
  </el-submenu>
  <el-menu-item @click="handleClear" v-else-if="dd.type == 'item' :index="dd.path">
    <i :class="dd.icon"></i>{{ dd.text }}
    <span v-if="map[dd.path] != undefined">({{ getCount(dd.path) }})</span>
  </el-menu-item>
</template>
<script>
export default{
    name: 'appMenuItem',   
}
</script>