基於iview的自定義menu-itme

定義組件 MyMenuItem.vue:

<template>
  <div>
      <Submenu v-if="item.children!=undefined&&item.children.length>0" :key="'key'+item.id" :name="'menu_'+item.id">
          <template slot="title">
                <Icon v-if="item.icon" :type="item.icon" />
                {{item.title}}
            </template>
          <my-menu-item v-for="(it,i) in item.children" :item="it"/>
      </Submenu>
      <MenuItem v-else :to="item.path" :key="'key'+item.id" :name="'menu_'+item.id">{{item.title}}</MenuItem>
  </div>
</template>

<script>
export default {
    name: 'MyMenuItem',
    props: {
        item:{type:Object}
    }
}
</script>

<style>

</style>

引用組件：

<Menu style="width:100%;" >
          <my-menu-item v-for="(t,i) in reportMenu" :item="t"/>
        </Menu>

<script>
import MyMenuItem from '@/components/MyMenuItem.vue';
import ClearDiv from '../../../components/clearDiv.vue';
export default {
  components: { MyMenuItem,ClearDiv },
}
</script>