vue实现无限层级菜单，递归组件用法

菜单组件使用ivew库的Menu组件，用哪个库都行，逻辑是一样的

1. 先写一层循环，第二层循环的时候定义一个用来递归的组件，这个组件注册为全局组件，用来自己调用自己

 <!-- 菜单 -->
                <Menu theme="dark" width="auto" :class="menuitemClasses" @on-select="handleSelectMenu">
                    <div v-for="item in menuList" :key="item.id">
                        <div>
                            <MenuItem :name="item.path" v-if="(!item.subMenu || item.subMenu.length <= 0)">
                            {
   
   { item.title }}
                            </MenuItem>
                            <template v-else>
                                <deep-menu v-if="item.type==0" :routeData="item" :shrink="shrink"></deep-menu>
                            </template>
                        </div>
                    </div>
                </Menu>

<!--  -->
<template>
    <div>
        <Submenu :name="routeData.path">
            <template slot="title">
                <Icon type="ios-analytics" />
                {
   
   { shrink ? "" : routeData.title }}
            </template>
            <div v-for="item in routeData.subMenu" :key="item.id">
                <div>
                    <!-- (!item.subMenu || item.subMenu.length <= 0) -->
                    <MenuItem :name="item.path" v-if="item.type==1">
                    {
   
   { shrink ? "" : item.title }}
                    </MenuItem>
                    <!-- v-if="item.type==0 && item.subMenu.length>0" -->
                    <template v-else>
                        <deep-menu :shrink="shrink" :routeData="item">
                        </deep-menu>
                    </template>
                </div>
            </div>
        </Submenu>
    </div>
</template>

<script>
export default {
    name:"DeepMenu",
    props: {
        routeData: {
            type: Object,
        },
        shrink: {
            type: Boolean,
            required: true,
        },
    },
    data() {
        return {};
    },
    methods: {},
    created() {},
    mounted() {},
};
</script>

<style lang='less'  scoped>
</style>