今天在做评论管理的时候在想如何去布局完成有层次嵌套的评论界面，这个时候就想到了用递归组件去完成。这是我今天实现的样式（很不好看）

使用递归组件方法布局出来的页面

使用的话很简单，只需要简单几步就能完成

1、第一步单独新建一个组件和一个树形结构的数据，一定要单独！

<template>

  <div class="big">

    <div class="content">

      <div v-for="(item,index) ofcommentList" :key="index">

        <div class="cut-off"></div>

        <!--用户名和时间-->

        <div class="name-time">

          <div class="username">{{item.username}}</div>

          <div class="time">{{item.createTime}}</div>

        </div>

        <!--评论内容-->

        <div class="comment-content">{{item.content}}</div>

        <!--点赞和回复-->

        <div class="approve-back" >

          <div class="approve">

            <img src="../../../assets/approve1.png" ref='img' class="img" @click="handlerAddApprove(item.id)">

            <div class="approve-number">赞{{item.approve}}</div>

          </div>

          <div class="back">

            <img src="../../../assets/back.png" class="img">

            <div class="text">回复</div>

          </div>

        </div>

        <div v-if="item.childCommentTreeMessage" class="div-child">

          <news-comment :commentList="item.childCommentTreeMessage"></news-comment>

        </div>

      </div>

    </div>

  </div>

</template>

最主要的代码我加粗了

使用递归组件的中药一个内容，需要给组件命名 主要逻辑代码，现判定有木有子类，如果有再调用自己的组件

重点：解释一下为什么要新建一个组件！ 因为如果在这个页面写了其他内容，在自己调用自己的时候，会把其他不需要的内容重复显示，造成排版混乱！