Vue组件递归渲染

父级菜单

<template>
	<div>
		<ul>
			<li v-for="(item,index) in asideList" ::key = "index" >
				<p class="main-title">
					<span class="title">{{item.title}}</span>
					<span class="iconfont icon-arrow-right-1"></span>
				</p>
				<ul v-if="item.children" >
					<AsideItem :asideChildren="item.children" ></AsideItem>
				</ul>
			</li>
		</ul>
	</div>
</template>

数据格式

	asideList: [
					{
						title: '一级标题',
						children: [
							{
								title: '二级标题',
								children: [
									{
										title: '三级标题',
									},
									{
										title: '三级标题',
									},
									{
										title: '三级标题',
									}
								]
							},
							{title: '二级标题'},
							{title: '二级标题'},
						]
					}
				]

子组件递归（直接使用name）

<template>
	<div>
		<li v-for="(item,index) in asideChildren" v-bind:key="index" >
			<p class="secondary-title" @click.prevent="secondaryDropDown" >
				<span>{{item.title}}</span>
			</p>
			<ul v-if="item.children">
				<AsideItem :asideChildren="item.children"></AsideItem>
			</ul>			
		</li>
	</div>
</template>
 
<script>
	export default{
		name: 'AsideItem',
		props: {
			asideChildren: {
				type: Array
			}
		},
	}
</script>