vue antd评论组件如何用递归的方式展示很多层嵌套的评论

首先，我们需要定义一个组件来渲染单个评论，例如：

<template>
  <div>
    <div>{{ comment.author }}</div>
    <div>{{ comment.content }}</div>
    <div v-if="comment.children">
      <Comment v-for="childComment in comment.children" :comment="childComment" :key="childComment.id" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  components: {
    Comment
  }
}
</script>

然后，我们可以在父组件中使用递归的方式来展示所有评论：

<template>
  <div>
    <Comment v-for="comment in comments" :comment="comment" :key="comment.id" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        {
          id: 1,
          author: 'Alice',
          content: 'This is a comment',
          children: [
            {
              id: 2,
              author: 'Bob',
              content: 'This is a reply',
              children: [
                {
                  id: 3,
                  author: 'Charlie',
                  content: 'This is a reply to a reply'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  components: {
    Comment
  }
}
</script>

在这个例子中，我们的评论数据是一个嵌套的数组，每个评论都可以有一个或多个子评论。我们在父组件中循环渲染每个评论，并在 `Comment` 组件中递归渲染子评论。这种递归方式可以处理任意层数的嵌套评论。