vue 使用递归组件
组件中配置name的意义,是为了使用递归组件,以及this.$options的取值
<template>
<div>
<second :list='list'></second>
</div>
</template>
<script>
export default {
data() {
return {
// 数据满足这样的格式
list: [
{
id: 1,
title: '中餐1',
children: [
{ title: '中餐11',
children: [
{ title: '中餐111' },
{ title: '中餐122' }
]
},
{ title: '中餐12' }
]
},
{
id: 2,
title: '中餐2'
},
]
}
},
components:{
// 异步加载组件
second: ()=> import('./second')
}
}
</script>
<template>
<div>
<div v-for="item in list" :key="item.id">
<div>{{ item.title }}</div>
// 使用递归组件
<div v-if="item.children" class="la">
<second :list="item.children"></second>
</div>
</div>
</div>
</template>
<script>
export default {
// 组件配置name的意义
name: "second",
props: {
list: Array,
},
};
</script>
<style lang="stylus" scoped>
.la
padding-left 10px
</style>