用vue写一个仿知乎的评论跟评论回复功能

以下是一个简单的仿知乎评论和回复功能的 Vue 组件示例，仅供参考：

<template>
  <div>
    <h2>评论区</h2>
    <div v-for="(comment, index) in comments" :key="index">
      <div>
        <strong>{{ comment.username }}：</strong>{{ comment.content }}
      </div>
      <div>
        <button @click="replyIndex === index ? replyIndex = -1 : replyIndex = index">
          回复
        </button>
        <div v-if="replyIndex === index">
          <textarea v-model="newReply"></textarea>
          <button @click="addReply(index)">提交回复</button>
        </div>
        <div v-for="(reply, replyIndex) in comment.replies" :key="replyIndex">
          <div>
            <strong>{{ reply.username }}：</strong>{{ reply.content }}
          </div>
        </div>
      </div>
    </div>
    <h2>发表评论</h2>
    <div>
      <label>用户名：</label>
      <input type="text" v-model="newComment.username">
    </div>
    <div>
      <label>评论内容：</label>
      <textarea v-model="newComment.content"></textarea>
    </div>
    <button @click="addComment">提交评论</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        {
          username: '张三',
          content: '这是第一条评论',
          replies: []
        },
        {
          username: '李四',
          content: '这是第二条评论',
          replies: []
        }
      ],
      newComment: {
        username: '',
        content: ''
      },
      newReply: '',
      replyIndex: -1
    }
  },
  methods: {
    addComment() {
      if (this.newComment.username && this.newComment.content) {
        this.comments.push({
          username: this.newComment.username,
          content: this.newComment.content,
          replies: []
        })
        this.newComment = { username: '', content: '' }
      }
    },
    addReply(index) {
      if (this.newReply) {
        this.comments[index].replies.push({
          username: '匿名用户',
          content: this.newReply
        })
        this.newReply = ''
        this.replyIndex = -1
      }
    }
  }
}
</script>

在这个示例中，我们使用一个 comments 数组来存储所有的评论和回复。每个评论是一个对象，包含一个用户名和评论内容，以及一个 replies 数组，用于存储该评论的所有回复。每个回复也是一个对象，包含一个用户名和回复内容。

在组件中，我们使用 v-for 指令来遍历 comments 数组，并渲染每个评论和回复。为了实现回复功能，我们使用一个 replyIndex 变量来跟踪当前用户正在回复的评论的索引。当用户点击“回复”按钮时，我们将 replyIndex 设置为当前评论的索引，弹出一个文本框供用户输入回复内容。当用户提交回复时，我们将新的回复对象添加到当前评论的 replies 数组中，并将 replyIndex 设置为 -1，以便关闭回复框。

最后，我们还提供了一个“发表评论”区域，让用户输入新的评论。当用户点击“提交评论”按钮时，我们将新的评论对象添加到 comments 数组中，并清空输入框。