当前位置：首页 > VUE

vue评论框架实现

2026-02-17 19:02:18VUE

Vue 评论框架实现步骤

组件结构设计

创建 Comment.vue 作为主组件，包含评论列表和评论表单。子组件 CommentList.vue 负责渲染评论，CommentForm.vue 处理用户输入。

<!-- Comment.vue -->
<template>
  <div class="comment-section">
    <CommentForm @submit="handleSubmit" />
    <CommentList :comments="comments" />
  </div>
</template>

数据管理

使用 Vue 的 ref 或 reactive 管理评论数据，通过 props 和自定义事件实现父子通信。

vue评论框架实现

// Comment.vue 数据部分
import { ref } from 'vue';
const comments = ref([
  { id: 1, text: '第一条评论', author: 'User1' }
]);
const handleSubmit = (newComment) => {
  comments.value.push(newComment);
};

评论表单实现

CommentForm.vue 包含输入框和提交按钮，通过 v-model 绑定数据并触发提交事件。

vue评论框架实现

<!-- CommentForm.vue -->
<template>
  <form @submit.prevent="submitComment">
    <textarea v-model="commentText" placeholder="输入评论"></textarea>
    <button type="submit">提交</button>
  </form>
</template>

<script setup>
const commentText = ref('');
const emit = defineEmits(['submit']);
const submitComment = () => {
  emit('submit', { 
    id: Date.now(), 
    text: commentText.value,
    author: '当前用户'
  });
  commentText.value = '';
};
</script>

评论列表渲染

CommentList.vue 遍历评论数据并显示每条评论的内容和作者。

<!-- CommentList.vue -->
<template>
  <ul>
    <li v-for="comment in comments" :key="comment.id">
      <p>{{ comment.text }}</p>
      <span>作者: {{ comment.author }}</span>
    </li>
  </ul>
</template>

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

样式优化

添加基础 CSS 美化评论区域，确保布局清晰。

/* Comment.vue 样式 */
.comment-section {
  max-width: 600px;
  margin: 0 auto;
}
textarea {
  width: 100%;
  min-height: 80px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}