今天，我们继续使用Vue的“我们的实战项目”。只有在实战中才会更明白，可以在纸上谈兵。在我们的《Vue一个案例引发的动态组件与全局事件绑定总结》之后，我们今天来谈谈如何在项目中使用递归组件。

信息分类显示列表

这次我们主要实现了二级/三级分类的信息分类展示列表，如下图所示：

看到这里，很多人会觉得实现起来很简单，一个嵌套循环是不够的。

是的，你是对的。事实就这么简单。那么我们先来看看这样一个简单的列表是如何实现的，然后这个方案的缺点在哪里。

首先看看我们的数据格式

List: [{ name:' economy '，children: [{name3360' home' }，{name: '7 days' }]}，{name:' comfort '，children :[{ name : ' smart holiday ' }。

列表中的div class=' list-item ' v-for='(item，Index)=' Index ' div class=' item-name ' span { { item . name } }/span/div v-if=' item . children ' class=' children-item ' div v-for='(child，Index)item。children ' : key=' index ' div class=' item-name ' span { { child。name}}/span/div/div/div/div嗯，看起来很完美，我们的列表显示得很好，你就大功告成了。

但是有一天，我们的产品突然过来说，我们的数据现在有了一个额外的分类级别，现在变成这样了。

列表： [{姓名： '经济'，儿童： [{姓名： '家庭旅馆'，儿童： [{姓名： '长江路-家庭旅馆' }，{姓名3360 '望江路-家庭旅馆' }] }，{姓名：Children: [{ name: '长江路-7天' }，{ name: '望江路-7天' }]}]好了，既然产品需求数据发生了变化，那我们就换个代码吧，继续在原来的代码上增加一层嵌套循环，这次终于又完成了，不过可能过不了两天我们的数据又恢复了。还是继续筑巢？

有的同学可能会觉得数据显示的层次那么多，肯定不会存在。只能说我们太年轻了，不排除这种存在的可能。如果我们遇到这种情况怎么办？我们将在这里使用递归组件，无论您的数据增加多少，我们都不需要更改代码。

递归组件

什么是递归组件？简单地说，在组件中使用组件本身。让我们看看如何在项目中使用递归组件来解决上述问题。

首先，我们创建列表的递归组件

列表' : key=' index ' div class=' List-item ' v-for='(item，index)列表' : key=' index ' div class=' item-name ' span { { item . name } }/span/div div v-if=' item . children ' class=' children-item ' List 3360 List=' item . children '/List/div/div/templatescript export default { name : ' List '，props: { list: Array } }/script注意，在上面的代码中，我们使用了List组件本身。之后，当我们在外部父组件中使用List组件时，无论我们的数据有多少层嵌套关系，它都可以被完美地、自适应地加载，我们不再需要在彼此内部嵌套。

模板div class=' List-detail ' List : List=' List '/List/div/templatescriptimport List from '。/组件/列表'；导出默认{name:' parent '、components: {list}、data(){ return { list :[{ name 3360 ' economic '、children: [{ name:' home '、children :[{ name : ' Shangjiang Road-Home Inn ' }]、{ name: '7 days '、children :[{ name 3:

摘要

以上就是我们今天要讲的递归组件。让我们快点试试。

类似于信息分类的显示是我们项目中非常常见的一种形式，我们可以通过使用递归组件很好地解决这个问题

以上是由边肖介绍的Vue的一个案例引起的递归组件使用的详细解释。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！