递归组件使用--（慕课网-去哪儿网）

所谓的递归组件就是在组件中调用自身组件
在我们写项目的时候，一般后台返回给我的数据都是嵌套的，类似于下面这种：

而有的时候我们需要将二级列表或者三级列表全部显示在页面中，这个时候我们就可以使用递归组件了

在Detail组件中，我们引用了detail-list组件，并且传了个参数list，

//Detail.vue
<template>
  <div class="detail">
    <detail-banner></detail-banner>
    <detail-header></detail-header>
    <div class="content">
      <detail-list :list="list"></detail-list>
    </div>
  </div>
</template>

所以在detail-list组件中我们就需要接收到这个参数，并且使用它

<template>
  <div class="list">
    <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-children">
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>

上面的代码中我们可以看到在item-children这个div中，我们引用了这个组件本身，并且将我们循环出来的item.children作为参数传进去，这样就成了我们说的递归组件，这样就可以将二级列表和三级列表全部显示出来。