用vue3语法 写一个仿知乎的评论跟评论回复功能

以下是一个使用 Vue 3 语法的仿知乎评论和回复功能的组件示例，仅供参考：

<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>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      comments: [
        {
          username: '张三',
          content: '这是第一条评论',
          replies: []
        },
        {
          username: '李四',
          content: '这是第二条评论',
          replies: []
        }
      ],
      newComment: {
        username: '',
        content: ''
      },
      newReply: '',
      replyIndex: -1
    })

    const addComment = () => {
      if (state.newComment.username && state.newComment.content) {
        state.comments.push({
          username: state.newComment.username,
          content: state.newComment.content,
          replies: []
        })
        state.newComment = { username: '', content: '' }
      }
    }

    const addReply = index => {
      if (state.newReply) {
        state.comments[index].replies.push({
          username: '匿名用户',
          content: state.newReply
        })
        state.newReply = ''
        state.replyIndex = -1
      }
    }

    return {
      comments: state.comments,
      newComment: state.newComment,
      newReply: state.newReply,
      replyIndex: state.replyIndex,
      addComment,
      addReply
    }
  }
}
</script>

在这个示例中，我们使用 Vue 3 的 Composition API，在 setup 函数中创建了一个响应式对象 state，用于存储所有的评论和回复。每个评论是一个对象，包含一个用户名和评论内容，以及一个 replies 数组，用于存储该评论的所有回复。每个回复也是一个对象，包含一个用户名和回复内容。

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

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