当前位置：首页 > VUE

vue评论模块如何实现

2026-01-22 01:00:51VUE

实现评论模块的基本结构

使用 Vue 的单文件组件（SFC）结构，拆分评论模块为父组件和子组件。父组件管理数据逻辑，子组件负责渲染和交互。

<!-- CommentSection.vue -->
<template>
  <div class="comment-section">
    <comment-form @submit="handleSubmit" />
    <comment-list :comments="comments" />
  </div>
</template>

<script>
import CommentForm from './CommentForm.vue'
import CommentList from './CommentList.vue'

export default {
  components: { CommentForm, CommentList },
  data() {
    return {
      comments: []
    }
  },
  methods: {
    handleSubmit(comment) {
      this.comments.unshift(comment)
    }
  }
}
</script>

评论表单组件实现

创建表单组件处理用户输入，包含输入验证和提交逻辑。

<!-- CommentForm.vue -->
<template>
  <form @submit.prevent="submitForm" class="comment-form">
    <textarea v-model="content" placeholder="输入评论内容"></textarea>
    <button type="submit" :disabled="!isValid">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  computed: {
    isValid() {
      return this.content.trim().length > 0
    }
  },
  methods: {
    submitForm() {
      if (!this.isValid) return
      const newComment = {
        id: Date.now(),
        content: this.content,
        timestamp: new Date().toISOString()
      }
      this.$emit('submit', newComment)
      this.content = ''
    }
  }
}
</script>

评论列表组件实现

创建列表组件展示评论，支持嵌套回复功能。

<!-- CommentList.vue -->
<template>
  <ul class="comment-list">
    <li v-for="comment in comments" :key="comment.id" class="comment-item">
      <div class="comment-content">{{ comment.content }}</div>
      <div class="comment-meta">
        <span>{{ formatDate(comment.timestamp) }}</span>
        <button @click="toggleReply(comment)">回复</button>
      </div>
      <comment-form 
        v-if="activeReplyId === comment.id" 
        @submit="handleReplySubmit" 
      />
      <comment-list 
        v-if="comment.replies && comment.replies.length" 
        :comments="comment.replies" 
      />
    </li>
  </ul>
</template>

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

export default {
  components: { CommentForm },
  props: ['comments'],
  data() {
    return {
      activeReplyId: null
    }
  },
  methods: {
    formatDate(timestamp) {
      return new Date(timestamp).toLocaleString()
    },
    toggleReply(comment) {
      this.activeReplyId = this.activeReplyId === comment.id ? null : comment.id
    },
    handleReplySubmit(reply) {
      const parentComment = this.findComment(this.comments, this.activeReplyId)
      if (parentComment) {
        if (!parentComment.replies) {
          this.$set(parentComment, 'replies', [])
        }
        parentComment.replies.push(reply)
        this.activeReplyId = null
      }
    },
    findComment(comments, id) {
      for (const comment of comments) {
        if (comment.id === id) return comment
        if (comment.replies) {
          const found = this.findComment(comment.replies, id)
          if (found) return found
        }
      }
      return null
    }
  }
}
</script>

数据持久化处理

结合 Vuex 或 Pinia 实现状态管理，与后端 API 交互实现数据持久化。

// store/modules/comments.js (Pinia 示例)
import { defineStore } from 'pinia'
import api from '@/api'

export const useCommentsStore = defineStore('comments', {
  state: () => ({
    comments: []
  }),
  actions: {
    async fetchComments() {
      this.comments = await api.getComments()
    },
    async addComment(comment) {
      const newComment = await api.createComment(comment)
      this.comments.unshift(newComment)
    },
    async addReply(parentId, reply) {
      const newReply = await api.createReply(parentId, reply)
      const parentComment = this.findComment(this.comments, parentId)
      if (parentComment) {
        if (!parentComment.replies) {
          parentComment.replies = []
        }
        parentComment.replies.push(newReply)
      }
    }
  }
})

样式优化

为评论模块添加基础样式，确保良好的视觉呈现。

/* CommentSection.vue 样式 */
.comment-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.comment-form {
  margin-bottom: 20px;
}
.comment-form textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  margin-bottom: 10px;
}

.comment-list {
  list-style: none;
  padding: 0;
}
.comment-item {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}
.comment-content {
  margin-bottom: 8px;
}
.comment-meta {
  font-size: 0.8em;
  color: #666;
  display: flex;
  justify-content: space-between;
}