Vue组件递归渲染
Posted 1024_Byte
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于Vue组件递归渲染的主要内容，如果未能解决你的问题，请参考以下文章