vue怎么实现文章评论和回复列表

今天小编给大家分享一下Vue怎么实现文章评论和回复列表的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

效果预览：

父组件：

<template>  <div class="comment-reply">    <div      v-for="(item, index) in articleLists"      :key="index"      class="article-list"    >      <div class="article-desc">{{ item.articleDesc }}</div>      <div v-if="item.children.length > 0">        <div class="reply-list" v-if="item.children.length > 0">          <my-cycle-list            v-for="(comment, index) in item.children"            :self="comment"            :parent="comment"            :key="index"          ></my-cycle-list>        </div>      </div>    </div>  </div></template><script>import myCycleList from '@/components/my-cycle-list'export default {  components: { myCycleList },  data() {    return {      // 文章列表      articleLists: [        { articleId: 'article-1', articleDesc: '围城' },        { articleId: 'article-2', articleDesc: '骆驼祥子' },        { articleId: 'article-3', articleDesc: '边城' },        { articleId: 'article-4', articleDesc: '朝花夕拾' }      ],      // 评论列表      commentsList: [        {          userId: 'user-1',          userName: '赵一',          articleId: 'article-1', // 关联的文章id          commentId: 'comment-1', // 评论id          replyId: null, // 回复哪条评论的id          desc: '作者是谁',          time: '2021-04-05 15:30:25'        },        {          userId: 'user-2',          userName: '钱二',          articleId: 'article-1',          commentId: 'comment-2',          replyId: null,          desc: '对呀，作者也不写',          time: '2021-04-05 15:30:25'        },        {          userId: 'user-3',          userName: '孙三',          articleId: 'article-1',          commentId: 'comment-3',          replyId: null,          desc: '楼上俩初中没毕业吧',          time: '2021-04-05 15:30:25'        },        {          userId: 'user-4',          userName: '李四',          articleId: 'article-1',          commentId: 'comment-4',          replyId: 'comment-1',          desc: '作者是钱钟书',          time: '2021-04-05 15:30:25'        },        {          userId: 'user-9',          userName: '牛九',          articleId: 'article-1',          commentId: 'comment-10',          replyId: 'comment-1',          desc: '钱钟书',          time: '2021-04-05 15:30:25'        },        {          userId: 'user-5',          userName: '王五',          articleId: 'article-2',          commentId: 'comment-5',          replyId: null,          desc: '哈哈哈',          time: '2021-04-05 15:30:25'        },        {          userId: 'user-6',          userName: '张六',          articleId: 'article-1',          commentId: 'comment-6',          replyId: 'comment-4',          desc: '不对吧',          time: '2021-04-05 15:30:25'        },        {          userId: 'user-7',          userName: '顾七',          articleId: 'article-1',          commentId: 'comment-7',          replyId: 'comment-6',          desc: '对的，就是钱钟书',          time: '2021-04-05 15:30:25'        },        {          userId: 'user-8',          userName: '朱八',          articleId: 'article-3',          commentId: 'comment-8',          replyId: null,          desc: '这本书真不错',          time: '2021-04-05 15:30:25'        },        {          userId: 'user-9',          userName: '纪九',          articleId: 'article-4',          commentId: 'comment-9',          replyId: null,          desc: '真的好看',          time: '2021-04-05 15:30:25'        }      ]    }  },  created() {    this.initCommentLists()    this.initArticleLists()  },  methods: {    // 格式化评论数据    initCommentLists() {      this.commentsList.forEach(i => {        this.$set(i, 'children', [])        // 将回复该评论的列表放入children中        let filterList = this.commentsList.filter(          j => j.replyId === i.commentId        )        if (filterList.length > 0) {          i.children = filterList        }      })      // 过滤出最高级      this.commentsList = this.commentsList.filter(i => i.replyId === null)    },    // 格式化文章数据    initArticleLists() {      this.articleLists.forEach(i => {        this.$set(i, 'children', [])        let filterList = this.commentsList.filter(          j => j.articleId === i.articleId        )        if (filterList.length > 0) {          i.children = filterList        }      })    }  }}</script><style scoped lang="sCSS">.comment-reply {  .article-list {    margin: 15px;    .article-desc {      color: coral;      font-size: 26px;      font-weight: bold;    }  }  .comment-list {    margin: 10px;    .comment {      .comment-username {        color: #999;        cursor: pointer;      }    }  }}</style>

my-cycle-list组件：

<template>  <div class="my-cycle-list">    <div class="lists">      <!-- 回复 -->      <div v-if="self.replyId">        <span class="self-username"> {{ self.userName }} 回复 </span>        <span class="parent-username" @click="parentClick"          >{{ parent.userName }}：</span        >        {{ self.desc }}        <span class="time">{{ self.time }}</span>      </div>      <!-- 评论 -->      <div v-else>        <span class="self-username" @click="commentUserNameClick">          {{ self.userName }}：        </span>        {{ self.desc }}        <span class="time">{{ self.time }}</span>      </div>      <!-- 递归组件 -->      <div v-if="self.children.length < flagNum || showAll">        <my-cycle-list          v-for="(child, index) in self.children"          :self="child"          :parent="self"          :key="index"        ></my-cycle-list>      </div>      <!-- 查看全部 -->      <div        v-if="self.children.length >= flagNum"        class="view-all"        @click="viewAll"      >      {{ !showAll ? `查看全部 ${self.children.length} 条回复` : `收起 ${self.children.length} 条回复`}}               </div>    </div>  </div></template><script>import myCycleList from '@/components/my-cycle-list'export default {  props: ['self', 'parent'],  components: { myCycleList },  name: 'my-cycle-list',  data() {    return {      flagNum: 2, // 超过多少条折叠      showAll: false    }  },  created() {},  methods: {    // 点击被回复的昵称事件    parentClick() {      console.log(this.parent)    },    // 评论人点击事件    commentUserNameClick() {      console.log(this.self)    },    // 查看/收起回复    viewAll() {      this.showAll = !this.showAll    }  }}</script><style scoped lang="scss">.my-cycle-list {  .lists {    margin: 10px;    .self-username {      cursor: pointer;      color: #999;    }    .parent-username {      color: burlywood;      cursor: pointer;    }    .time {      margin: 0 10px;      color: #666;      font-size: 12px;    }    .view-all {      margin: 10px 0;      color: darkcyan;      cursor: pointer;    }  }}</style>

以上就是“vue怎么实现文章评论和回复列表”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。