当前位置：首页 > VUE

vue实现评论回复

2026-02-19 21:35:24VUE

Vue 实现评论回复功能

评论回复功能通常需要嵌套数据结构、动态渲染和事件处理。以下是基于 Vue 3 的实现方案。

数据结构设计

评论数据通常采用嵌套结构，每条评论包含回复列表：

vue实现评论回复

const comments = ref([
  {
    id: 1,
    content: "主评论1",
    replies: [
      { id: 11, content: "回复主评论1" }
    ]
  },
  {
    id: 2,
    content: "主评论2",
    replies: [] 
  }
]);

模板渲染

使用递归组件实现嵌套渲染：

<template>
  <div v-for="comment in comments" :key="comment.id">
    <div class="comment">
      {{ comment.content }}
      <button @click="showReplyBox(comment.id)">回复</button>

      <!-- 回复框 -->
      <div v-if="activeReplyId === comment.id">
        <input v-model="replyContent" />
        <button @click="submitReply(comment.id)">提交</button>
      </div>

      <!-- 递归渲染回复 -->
      <CommentList v-if="comment.replies.length" :comments="comment.replies"/>
    </div>
  </div>
</template>

事件处理逻辑

const activeReplyId = ref(null);
const replyContent = ref('');

const showReplyBox = (commentId) => {
  activeReplyId.value = commentId;
};

const submitReply = (commentId) => {
  const newReply = {
    id: Date.now(),
    content: replyContent.value
  };

  const comment = comments.value.find(c => c.id === commentId);
  comment.replies.push(newReply);

  replyContent.value = '';
  activeReplyId.value = null;
};

递归组件定义

创建单独的CommentList.vue组件：

vue实现评论回复

<script setup>
defineProps({
  comments: Array
});
</script>

<template>
  <div v-for="comment in comments" :key="comment.id">
    <!-- 相同模板结构 -->
  </div>
</template>

样式优化

添加基础CSS样式：

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

.comment button {
  margin-left: 10px;
}

完整组件示例

将所有逻辑整合到CommentComponent.vue：

<script setup>
import { ref } from 'vue';
import CommentList from './CommentList.vue';

const comments = ref([...]); // 初始数据
const activeReplyId = ref(null);
const replyContent = ref('');

// 方法定义...
</script>

<template>
  <CommentList :comments="comments" />
</template>