Vue を使用して Zhihu のようなコメント効果を実装する方法

<template>
  <div class="comment">
    <!-- 评论内容展示区域 -->
    <div class="comment-content">{{ comment }}</div>
    
    <!-- 评论回复区域 -->
    <div class="comment-reply">
      <textarea v-model="reply"></textarea>
      <button @click="addReply">回复</button>
    </div>
    
    <!-- 子评论列表区域 -->
    <ul class="sub-comments">
      <li v-for="subComment in subComments">
        <Comment :comment="subComment"></Comment>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Comment',
  props: {
    comment: String // 评论内容
  },
  data() {
    return {
      reply: '', // 回复内容
      subComments: [] // 子评论列表
    }
  },
  methods: {
    addReply() {
      // 添加回复到子评论列表
      this.subComments.push(this.reply);
      this.reply = ''; // 清空回复内容
    }
  }
}
</script>

<style scoped>
/* 样式省略 */
</style>

<template>
  <div class="app">
    <!-- 评论列表 -->
    <ul class="comments">
      <li v-for="comment in comments">
        <Comment :comment="comment"></Comment>
      </li>
    </ul>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Comment
  },
  data() {
    return {
      comments: [] // 评论列表
    }
  },
  created() {
    // 初始化评论列表数据
    this.comments = [
      '这是一条评论1',
      '这是一条评论2'
    ];
  }
}
</script>

<style scoped>
/* 样式省略 */
</style>