vue.js&uni-app开发评论模块--递归渲染回复评论

.comment-reply-data{.comment-root-header{颜色：#333333；保证金：27rpx0；图片{宽度：48rpx；高度：48rpx；边界半径：40rpx；右边距：20rpx；}}.comment-root-user{border-bottom:2rpxsolid#eee;}图片{宽度：48rpx;高度：48rpx；边界半径：40rpx；右边距：20rpx；}.replycomment-content{margin-bottom:20rpx;分词：break-all；.replyer{显示：内联块；填充：012rpx；颜色：#333333；位置：相对；底部：2rpx；}}.comment-data{颜色：#666；行高：20rpx；字体大小：20rpx；底部填充：28rpx；border-bottom:2rpxsolid#EDEDED;.operation-icon{.operation-item{margin-left:49rpx;.icon{字体大小：22rpx；}}}//点赞.active-support{animation-name:support;动画持续时间：500ms；动画迭代次数：1；动画填充模式：转发；}}}先看需求:::hljs-center:::我们需要如图渲染评论数据，后台返回我们的数据格式是什么样的？答案是父子层次的逐级嵌套数据结构：:::hljs-center:::面对这样的数据结构，我们如何渲染呢？递归渲染更可行。首先，我们创建一个回复评论的组件。父组件将评论的回复数组传递给子组件，并在子组件中渲染。如果回复数组中有子回复，那么此时只要将数据传递给回复组件即可。这样就可以达到递归渲染数组的目的。在父组件中引用回复组件importreplyCommentfrom'../comment-item/comment-item.vue'components:{replyComment},ReplyComment:.comment-reply-data{.comment-root-header{颜色：#333333；保证金：27rpx0；图片{宽度：48rpx；高度：48rpx；边界半径：40rpx；右边距：20rpx；}}.comment-root-user{border-bottom:2rpxsolid#eee;}图片{宽度：48rpx;高度：48rpx；边界半径：40rpx；右边距：20rpx；}.replycomment-content{margin-bottom:20rpx;分词：break-all；.replyer{显示：内联块；填充：012rpx；颜色：#333333；位置：相对；底部：2rpx；}}.comment-data{颜色：#666；行高：20rpx；字体大小：20rpx；底部填充：28rpx；border-bottom:2rpxsolid#EDEDED;.operation-icon{.operation-item{margin-left:49rpx;.icon{字体大小：22rpx；}}}//点赞.active-support{animation-name:support;动画持续时间：500ms；动画迭代次数：1；动画填充模式：转发；}}}那么实际效果如何呢？:::hljs-center::::其实一开始看到这个数据结构很头疼，但是仔细想了想，递归是可以解决的，然后就开始做了。我没想到它会实现。这个需求，只要静下心来想一想，总能找到解决的办法。退伍军人可以关注我的个人资料公众号或访问我的博客