不用递归的话 我们就用循环呗
<div class="list-item" v-for="(item, index) in list" :key="index">
<div class="item-name">
<span>{{item.name}}</span>
</div>
<div v-if="item.children" class="children-item">
<div v-for="(child, index) in item.children" :key="index">
<div class="item-name">
<span>{{child.name}}</span>
</div>
</div>
</div>
</div>
用组件递归
1.创建List组件并引入父组件中，通过属性传值传送数据
<template>
<div class="hello">
<div>
<p>list列表</p>
<List :list="list"></List>
</div>
</div>
</template>
<script>
const List = ()=>import("./List")
export default {
name: 'HelloWorld',
components:{
List
},
data () {
return {
list: [
{
name: "经济",
children: [
{name: "如家",
children:[
{name:"chongqinglu-如家"},
{name:"上海-如家"}
]
},
{ name: "7天"}
]
},
{
name: "舒适",
children: [
{name: "智选假日"},
{name: "全季"}
]
}
]
}
},
}
</script>
2. List组件内接收数据
<template>
<div class="list">
<div v-for="(item,index) in list" :key="index">
<div class="item.name">
{{item.name}}
</div>
<div v-if="item.children" class="children-item">
<list :list="item.children"></list>
//注意：这里的list标签对应组件的name
</div>
</div>
</div>
</template>
<script>
export default {
name:"list",
props:{
list:{
default:"",
type:Array,
required:true
}
}
,
data(){
return{
}
}
}
</script>
