vue递归组件

这是用来展示后台左侧导航的代码

<template>
	<div>
		<el-menu router unique-opened>
			<el-submenu
				:index="index + ''"
				v-for="(obj, index) in data"
				:key="obj.name"
			>
				<template slot="title">
					<router-link
						:to="obj.path === '/' || obj.path === '/appraise' ? obj.path : ''"
					>
						<i :class="obj.meta.icon"></i>
						<span>{{ obj.meta.title }}</span>
					</router-link>
				</template>
				<div v-for="data in obj.children" :key="data.name">
					/* data.meta.show 是用来判断路由是否在左侧导航显示的 */
					<el-menu-item-group v-if="data.meta.show">
						<el-menu-item :index="`${obj.path}/${data.path}`">{{
							data.meta.title
						}}</el-menu-item>
						<Deep-component
							v-if="data.children"
							:data="data.children"
						></Deep-component>
					</el-menu-item-group>
				</div>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
	name: 'DeepComponent',
	props: {
		data: {
			type: Array,
			default: [],
		},
	},
	name: 'DeepComponent',
	computed: {
		...mapState(['routes']),
	},
}
</script>```