今天小编给大家分享一下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怎么实现文章评论和回复列表”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
