vue 递归组件 代码实例
时间: 2023-08-13 15:58:19 浏览: 45
当然可以!下面是一个简单的 Vue 递归组件的代码示例:
```html
<template>
<div>
<h2>{{ category.name }}</h2>
<ul>
<li v-for="subCategory in category.subCategories" :key="subCategory.id">
<span>{{ subCategory.name }}</span>
<recursive-category :category="subCategory" />
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'RecursiveCategory',
props: {
category: {
type: Object,
required: true
}
},
components: {
RecursiveCategory: {
name: 'RecursiveCategory',
props: {
category: {
type: Object,
required: true
}
},
template: `
<li>
<span>{{ category.name }}</span>
<recursive-category v-if="category.subCategories" :category="subCategory" v-for="subCategory in category.subCategories" :key="subCategory.id" />
</li>
`
}
}
}
</script>
```
在上面的示例中,我们创建了一个名为 `RecursiveCategory` 的组件,它接收一个名为 `category` 的属性。在组件的模板中,我们首先展示了当前分类的名称,然后使用 `v-for` 指令遍历子分类数组并递归地渲染 `RecursiveCategory` 组件。
在 `RecursiveCategory` 组件内部,我们也定义了一个名为 `RecursiveCategory` 的子组件,并传递了子分类作为 `category` 属性。这样,我们可以实现无限层级的递归组件。
请注意,为了避免出现无限循环渲染,我们使用了 `v-if` 条件语句来判断是否有子分类存在。如果有子分类,则继续递归渲染 `RecursiveCategory` 组件。
希望这个示例能帮助到你!如果你还有其他问题,请随时提问。