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

梦里梦外; 2021-09-16 03:36 347阅读 0赞

# 递归组件 #

## 什么是递归组件？ ##

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

## 代码示例 ##

### 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>
          
          <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样式，我们只要仅仅关注一级列表即可，二级列表会自动使用相同的样式。如图：

![70][]

[70]: /images/20210802/f0209207a2684e1da55f85da22fa5c21.png

发表评论取消回复

表情：

评论列表（有 0 条评论，347人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现递归组件

父组件 <loongDropDownBox :keyVal="keyVal" :menuData="menuData"></loongDropDownBox> 组件

怼烎@/ 2023年06月23日 02:52/ 0 赞/ 34 阅读

相关 vue递归组件

vu递归组件的实现：  <template> <div class="contain"> <ul>

深碍√TFBOYSˉ_/ 2023年01月19日 07:11/ 0 赞/ 213 阅读

相关 Vue 递归组件

对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加，那么有没有一种方法来解决这个问题呢？答案是肯定的

浅浅的花香味﹌/ 2022年12月27日 08:17/ 0 赞/ 203 阅读

相关 vue 递归组件

子组件 <template> <ul class="tree"> <li v-for="(item,index) in tree

素颜马尾好姑娘i/ 2022年10月26日 14:18/ 0 赞/ 204 阅读

相关递归组件 vue 【关键：组件定义 name】

对于一些有规律的 dom 结构，我们可以通过递归方式来生成这个结构，，那么在 vue 的模板中，我们能不能递归生成dom,答案是肯定的，在 vue 的组件中能够调用自己本身。

ゝ一世哀愁。/ 2022年09月06日 10:24/ 0 赞/ 222 阅读

相关 Vue递归组件

Vue递归组件 1、递归组件 2、实例 1、递归组件组件可以在自己的模板种递归调用自身，但这需要使用`name`选项为组件指定一个内部调用的名称

ゝ一纸荒年。/ 2022年08月30日 04:15/ 0 赞/ 207 阅读

相关 Vue项目详情页 - 使用递归组件实现详情页列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

分手后的思念是犯贱/ 2022年04月13日 03:53/ 0 赞/ 574 阅读

相关 Vue2.5 学习笔记 9.5递归组件的使用

1. 展示多级列表数据（多层JSON数据的时候就会用到组件递归调用。不然每个都写一次for 会恶心死的）先新建个list组件： <template>

待我称王封你为后i/ 2022年02月22日 13:28/ 0 赞/ 213 阅读

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

递归组件什么是递归组件？ > 组件自身去调用组件自身。代码示例 DetailList.vue(子组件-递归组件) <t

梦里梦外;/ 2021年09月16日 03:36/ 0 赞/ 348 阅读

相关 Vue 实现递归组件的原理

这个是文件结构：可以create一个脚手架，来写，比较简单。 ![在这里插入图片描述][20190824195108634.png] 实现效果图： ![在这里插入图

不念不忘少年蓝@/ 2021年08月13日 20:07/ 0 赞/ 502 阅读