vue3 无限评论组件

对于Vue 3的无限评论组件，你可以按照以下步骤进行开发：

1. 首先，创建一个评论组件 Comment.vue：

<template>
  <div>
    <div v-for="comment in comments" :key="comment.id">
      <p>{{ comment.text }}</p>
      <button @click="loadReplies(comment.id)">查看回复</button>
      <div v-if="comment.showReplies">
        <Comment :comments="comment.replies" />
      </div>
    </div>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
export default {
  props: {
    comments: {
      type: Array,
      required: true,
    },
  },
  methods: {
    loadReplies(commentId) {
      // 根据commentId加载回复
      // 更新对应的comment.showReplies属性
    },
    loadMore() {
      // 加载更多评论
      // 向后台发送请求，获取新的评论数据
      // 将新的评论数据追加到this.comments数组中
    },
  },
};
</script>

2. 在父组件中使用 Comment 组件，并传入初始的评论数据：

<template>
  <Comment :comments="comments" />
</template>

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

export default {
  components: {
    Comment,
  },
  data() {
    return {
      comments: [
        // 初始的评论数据
        // 包含评论内容和回复数据
      ],
    };
  },
};
</script>

这样就完成了一个基本的无限评论组件。通过点击 "查看回复" 按钮，可以展开评论的回复；点击 "加载更多" 按钮，可以加载更多的评论数据。

你可以根据实际需求进行调整和扩展，例如添加发表评论的功能、评论的点赞等。希望对你有所帮助！