Vue组件实现评论区功能

下面是详细讲解 Vue 组件实现评论区功能的完整攻略。

什么是 Vue 组件

Vue 组件就是将一个页面拆分成多个小模块，每个小模块就是一个 Vue 组件。Vue 组件可以重复使用，提高了代码的复用性和可维护性。

Vue 组件实现评论区功能

评论区功能是一个很常见的场景，下面我们来详细讲解如何使用 Vue 组件实现评论区功能。

步骤一：创建评论区组件

首先我们需要创建一个评论区组件，可以使用 Vue CLI 创建。

// 创建 Comment 组件
<template>
  <div>
    <h3>评论区</h3>
    <ul>
      <li v-for="(comment, index) in comments" :key="index">
        <span>{{ comment.username }}：</span>
        <span>{{ comment.content }}</span>
      </li>
    </ul>
    <div>
      <input type="text" placeholder="请输入昵称" v-model="username" />
      <textarea placeholder="请输入评论内容" v-model="content"></textarea>
      <button @click="addComment">发表</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      content: '',
      comments: [
        { username: '小明', content: '这个评论区很好' },
        { username: '小红', content: '我觉得还可以' },
      ],
    };
  },
  methods: {
    addComment() {
      if (this.username && this.content) {
        this.comments.push({
          username: this.username,
          content: this.content,
        });
        this.username = '';
        this.content = '';
      } else {
        alert('昵称和评论内容不能为空');
      }
    },
  },
};
</script>

步骤二：在父组件中使用评论区组件

在父组件中使用评论区组件。

<template>
  <div>
    <h2>Vue 组件实现评论区功能</h2>
    <comment></comment>
  </div>
</template>

<script>
import Comment from './Comment.vue';

export default {
  components: {
    Comment,
  },
};
</script>

步骤三：添加样式

最后我们需要添加一些样式美化一下评论区。

// 添加样式
<style>
.comment {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 20px;
}

.comment h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: normal;
}

.comment ul {
  padding: 0;
  margin: 0 0 10px;
}

.comment li {
  list-style: none;
  margin-bottom: 10px;
}

.comment li span:first-child {
  font-weight: bold;
}

.comment input[type='text'],
.comment textarea {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.comment button {
  padding: 10px 20px;
  background-color: #3388ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

示例一：Vue 2.x 实现评论区功能

下面是一个使用 Vue 2.x 实现评论区功能的示例，具体代码可以参考 vue-comment-section。

示例二：使用 Element 组件库实现评论区功能

下面是一个使用 Element 组件库实现评论区功能的示例。

// 使用 Element 组件库实现评论区功能
<template>
  <el-card>
    <h3 slot="header">评论区</h3>
    <ul>
      <li v-for="(comment, index) in comments" :key="index">
        <span>{{ comment.username }}：</span>
        <span>{{ comment.content }}</span>
      </li>
    </ul>
    <el-form style="margin-top: 20px;">
      <el-form-item label="昵称">
        <el-input v-model="username"></el-input>
      </el-form-item>
      <el-form-item label="评论内容">
        <el-input type="textarea" v-model="content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addComment">发表</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      content: '',
      comments: [
        { username: '小明', content: '这个评论区很好' },
        { username: '小红', content: '我觉得还可以' },
      ],
    };
  },
  methods: {
    addComment() {
      if (this.username && this.content) {
        this.comments.push({
          username: this.username,
          content: this.content,
        });
        this.username = '';
        this.content = '';
      } else {
        this.$message({
          type: 'warning',
          message: '昵称和评论内容不能为空',
        });
      }
    },
  },
};
</script>

<style>
.card {
  margin-top: 20px;
  border-radius: 5px;
}
</style>