创建公共组件
name 属性 很重要
需要与调用自身组件一致 (不然没效果)
<template>
<div>
<div class="item" v-for="(item, index) of list" :key="index">
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{ item.title }}
</div>
<div v-if="item.children" class="item-chilren">
<!-- 自己调用自己 -->
<detail-list :list="item.children"></detail-list>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
props: ["list"],
name: "DetailList",
data() {
return {};
},
methods: {},
computed: {},
watch: {},
};
</script>
<style lang="stylus" scoped></style>
在需要的时候导入
// 列表 内有 递归渲染
import ListsApp from "./List"
// 注册
components: { ListsApp },
使用
<ListsApp :list="categoryList"></ListsApp>