iview multi-level menu implementation

Create menu component:

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

<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>
            
     &lt;/Submenu&gt;  

  </span>
</template>
<script>
export default {
  name: "myTree",
   props:{
        menu:{
            type:Array,
            require:true
        }
    }
}
</script>