vue笔记 递归组件的使用

递归组件

什么是递归组件？

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

代码示例

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>

 

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