iview书写多级菜单 menu

新建menu组件：

<template>
   <div>
        <Menu @on-select='tabopen'>
          <MenuItems :menu='menu'></MenuItems>
        </Menu>

   </div>

</template>
<script>
import MenuItems from './menuItem'
export default {
    name:'Menus',
    props:{
        menu:{
            type:Array,
            require:true
        }
    },
    components:{
        MenuItems
    },
    methods:{
        tabopen(e){
            this.$emit('on-select',e)
        }
    }

}
</script>

新建menuitem组件：

<template>
  <span>
         <Submenu :name="item.name" v-for="(item,index) in menu" :key="index">
            <template slot="title">
                <Icon type="ios-paper" />
                {{item.title}}
            </template>
            <span v-for="(val,key) in item.children"  :key="key" >
                <MenuItem :name="val.name">{{val.title}}</MenuItem>
                 <my-tree v-if="val.children" :menu='val.children'></my-tree>
            </span>

         </Submenu>  
  </span>

</template>
<script>

export default {
  name: "myTree",
   props:{
        menu:{
            type:Array,
            require:true
        }
    }

}

</script>

调用组件：