在 Vue.js 中评论

在 Vue.js 中，评论是一个非常常见的功能。让用户可以评论文章、商品等等。在这篇文章中，我们将介绍如何使用 Vue.js 创建评论功能。

创建评论组件

我们从创建一个评论组件开始。在这个组件中，我们需要显示评论列表和评论表单。

首先，我们创建一个 Comment 组件：

<template>
  <div class="comment">
    <h2>Comments</h2>
    <ul>
      <li v-for="(comment, index) in comments" :key="index">
        {{ comment.text }}
      </li>
    </ul>
    <form @submit.prevent="submitComment">
      <textarea v-model="newComment" placeholder="Add a comment"></textarea>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        { text: 'Comment 1' },
        { text: 'Comment 2' },
        { text: 'Comment 3' }
      ],
      newComment: ''
    }
  },
  methods: {
    submitComment() {
      if (this.newComment.trim() !== '') {
        this.comments.push({ text: this.newComment })
        this.newComment = ''
      }
    }
  }
}
</script>

<style scoped>
.comment {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}

.comment ul {
  list-style: none;
  padding: 0;
}

.comment li {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}
</style>

我们在 data 中定义了一个 comments 数组和一个 newComment 变量。comments 数组将用于存储所有的评论。newComment 变量将用于存储用户输入的新评论。

在 template 中，我们使用了 v-for 指令来遍历 comments 数组，将每个评论显示在列表中。我们同时也在页面中显示了一个文本框和一个提交按钮，用于添加新的评论。当用户提交评论时，我们调用 submitComment 方法。

在 submitComment 方法中，我们检查 newComment 是否为空。如果不是，我们将新评论推送到 comments 数组中，并清空 newComment 变量。

在父组件中使用评论组件

现在我们已经创建了评论组件，我们需要将其添加到父组件中。在这个例子中，我们将创建一个 Post 组件，并在其中添加 Comment 组件。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ body }}</p>
    <comment></comment>
  </div>
</template>

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

export default {
  components: {
    'comment': Comment
  },
  data() {
    return {
      title: 'My Post',
      body: 'This is my first post!'
    }
  }
}
</script>

在 template 中，我们首先显示文章标题和文章内容。然后，我们使用 comment 标签来在页面中添加评论组件。请注意，在我们之前创建的 Comment 组件中，使用的是 li 标签。如果我们将其在 Post 组件中使用，那么会导致语法错误。为了解决这个问题，我们可以使用 components 选项来定义别名，这样我们就可以在 template 中使用自定义组件。

总结

在这篇文章中，我们学习了如何在 Vue.js 中创建评论组件和在父组件中使用评论组件。虽然这是一个简单的示例，但它可以帮助你理解如何在 Vue.js 中创建组件和使用组件，以及如何在父组件和子组件之间通信。希望这篇文章对你有帮助！