vue项目笔记（28）-递归组件的使用

最新推荐文章于 2024-08-26 11:51:47 发布

原创最新推荐文章于 2024-08-26 11:51:47 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#递归组件

Vue 专栏收录该内容

76 篇文章

订阅专栏

本文介绍了Vue中的递归组件概念，组件可以调用自身形成递归。详细展示了`DetailList.vue`子组件（递归组件）和`Detail.vue`父组件的代码示例。在实际应用中，父组件传递的二维数组数据结构配合递归组件，能够自动渲染多级列表，且二级列表的样式与一级列表一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

递归组件

什么是递归组件？

组件自身去调用组件自身。

代码示例

DetailList.vue(子组件-递归组件)

<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>
      <!--递归组件：DetailList调用自身-->
      <div v-if="item.children" class="item-children">
        <detail-list :list="item.children"></detail-list>
      </div>

    </div>
  </div>
</template>

Detail.vue（父组件）

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

<script>
  import DetailBanner from './components/Banner.vue'
  import DetailHeader from './components/Header.vue'
  import DetailList from './components/List.vue'
  export default{
    name: 'Detail',
    components: {
      DetailBanner,
      DetailHeader,
      DetailList
    },
    data(){
      return {
        list: [{
          title: '成人票',
          children: [{
            title: '成人3馆联票',
            children: [{title: '成人3馆联票-成都'}, {title: '成人3馆联票-上海'}, {title: '成人3馆联票-北京'}, {title: '成人3馆联票-河南'}]
          }, {
            title: '成人4馆联票'
          }, {
            title: '成人5馆联票'
          }, {
            title: '成人6馆联票'
          }]
        }, {
          title: '学生票'
        }, {
          title: '儿童票'
        }, {
          title: '特惠票'
        }]
      }
    }
  }
</script>

注意：父组件中的数据结构是二维数组。子组件调用自身之后，对于css样式，我们只要仅仅关注一级列表即可，二级列表会自动使用相同的样式。如图：