对于文章评论及回复的实现

先看下大概样子：

 

 

布局基本和百度文章内的一样，可以去百度随便点个文章看一下效果。

点击回复按钮会在对应的评论下面出现输入框及发表按钮；

实现起来也很简单，简单整理一下思路：

首先数据是二维数组形式的，评论列表内包含回复列表。先循环遍历出所有评论，再在评论内部遍历所有它的回复

这里没有采用回复框动态添加（addChild）到指定父div的方式，而是直接把回复框直接当作一个元素与评论一起循环遍历，然后利用 v-if 来指定哪个框该显示

 html结构如下：

子评论的结构与父一样，

data ： 

 两个id一个是评论id，一个是回复（子评论）的id，

 replyIndex是评论的index，

 replyitemIndex是子评论的index

在点击回复时：

当前评论的回复框出现，其他评论的框隐藏。再次点击也隐藏，取消回复；

传入评论id 用于传参，第二个参数为当前点击的 index用作匹配，

因为页面只能出现一个框，所以如果有子评论的回复框是显示的时候，要把子评论的框先隐藏。

如果当前点击的 index 和 replyIndex 相等，那么点击的是同一个评论下的回复按钮，那就把框隐藏（replyIndex重新置为false），否则等于新的 index （别的评论框显示）

点击回复子评论的时候，单传靠 replyitemIndex 还不行，因为点击第一个子评论的你会发现每个评论下面的第一个子评论的框都出现了，所以要指定一个 parentIndex，只让当前点击的这个评论下的子评论的回复框显示，看上面子评论盒子的 v-if 

当然，如果父评论的回复框有显示的，首先也得把它隐藏

 

好了，基本就实现了，剩下就去拿对应的ID去走接口就行了。