vue实现多层评论回复

Vue 实现多层评论回复

数据结构设计

采用嵌套结构存储评论数据，每条评论包含子评论数组：

comments: [
  {
    id: 1,
    content: '一级评论',
    replies: [
      {
        id: 11,
        content: '二级回复',
        replies: [
          { id: 111, content: '三级回复' }
        ]
      }
    ]
  }
]

递归组件实现

创建可递归调用的评论组件：

<template>
  <div class="comment">
    <div>{{ comment.content }}</div>
    <button @click="replyTo(comment.id)">回复</button>

    <div v-if="showReplyForm === comment.id">
      <textarea v-model="replyContent"></textarea>
      <button @click="submitReply">提交</button>
    </div>

    <div class="replies" v-if="comment.replies">
      <comment-item 
        v-for="reply in comment.replies"
        :key="reply.id"
        :comment="reply"
        @reply="handleReply"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommentItem',
  props: ['comment'],
  data() {
    return {
      showReplyForm: null,
      replyContent: ''
    }
  },
  methods: {
    replyTo(id) {
      this.showReplyForm = id
    },
    submitReply() {
      this.$emit('reply', {
        parentId: this.comment.id,
        content: this.replyContent
      })
      this.replyContent = ''
      this.showReplyForm = null
    },
    handleReply(payload) {
      this.$emit('reply', payload)
    }
  }
}
</script>

数据操作方法

在父组件中实现添加回复的逻辑：

methods: {
  addReply({ parentId, content }) {
    const newReply = {
      id: Date.now(),
      content,
      replies: []
    }

    function findAndAppend(comments) {
      for (let comment of comments) {
        if (comment.id === parentId) {
          comment.replies.push(newReply)
          return true
        }
        if (comment.replies && comment.replies.length) {
          if (findAndAppend(comment.replies)) return true
        }
      }
      return false
    }

    findAndAppend(this.comments)
  }
}

样式优化

添加缩进样式显示层级关系：

.comment {
  margin-left: 20px;
  padding: 10px;
  border-left: 2px solid #eee;
}

.replies {
  margin-top: 10px;
}

完整示例调用

父组件调用方式：

<template>
  <div>
    <comment-item 
      v-for="comment in comments"
      :key="comment.id"
      :comment="comment"
      @reply="addReply"
    />
  </div>
</template>

<script>
import CommentItem from './CommentItem.vue'

export default {
  components: { CommentItem },
  data() {
    return {
      comments: [] // 初始评论数据
    }
  }
}
</script>