黑马头条vue2.0项目实战（八）——文章评论

目录

1. 展示文章评论列表

1.1 准备组件

1.2 获取文章评论数据并展示

1.3 展示文章评论总数量

1.4 文章评论项

2. 评论点赞

3. 发布文章评论

3.1 准备弹出层

3.2 封装发布文章评论组件

3.3 请求发布

4. 评论回复

4.1 准备回复弹层

4.2 封装内容组件

4.3 处理头部

4.4 处理当前评论项

4.5 展示评论回复列表

4.6 解决弹层中组件内容不更新问题

4.7 发布回复

---

1. 展示文章评论列表

1.1 准备组件

为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。

① 创建 src/views/article/components/article-comment.vue

② 在文章详情页面中加载注册文章评论子组件

③ 在文章详情页面的正文结束后面使用文章评论子组件

1.2 获取文章评论数据并展示

步骤：

• 封装接口

• 请求获取数据

• 处理模板

实现：

① 在 api/comment.js 中添加封装请求方法

② 请求获取数据

• List 列表组件步骤：
  • 请求获取数据
  • 将数据添加到列表中
  • 数据加载完毕，设置loading
  • 判断是否还有数据
    • 有，获取更新下一页的页码
    • 没有，设置加载状态为结束

③ 模板绑定

1.3 展示文章评论总数量

1.4 文章评论项

① 封装文章评论项子组件

② 在文章评论列表组件的内部使用

③ 模版绑定

2. 评论点赞

① 在 api/comment.js 中添加封装两个数据接口

② 然后给评论项中的点赞图标注册点击事件

③ 处理事件处理函数

• button 组件的自带 loading 功能

3. 发布文章评论

3.1 准备弹出层

3.2 封装发布文章评论组件

3.3 请求发布

基本思路：

• 找到数据接口
• 封装请求方法
• 注册发布点击事件
  • 请求发布
  • 成功：将发布的内容展示到列表中
  • 失败：提示失败

① 封装数据接口

② 给发布按钮点击事件

③ 事件处理函数

④ 发布成功处理

•  清空文本框
• 关闭发布评论的弹层
• 将最新发布的评论展示到列表的顶部（兄弟组件之间传值，eventBus）
• 更新文章评论的总数量

4. 评论回复

4.1 准备回复弹层

① 在详情页中使用弹层用来展示文章的回复

• 在 data 中添加数据用来控制展示回复弹层的显示状态

• 在详情页中添加使用弹层组件

② 当点击评论项组件中的回复按钮的时候展示弹层

• 在 comment-item.vue 组件中点击回复按钮的时候，对外发布自定义事件

• 在详情页组件中使用的位置监听处理
• 点击回复显示弹出层
• 传递当前点击回复的评论项

• 遇到的问题：
  • 把当前的评论对象传递给 reply-comment组件，把当前点击之后展示弹出层的值传递给爷爷组件，让爷爷组件展示回复评论弹出层，但是当一个事件中同时使用两次 $emit触发的其他组件中的事件，可能导致状态更新延迟。
  • 解决方案：只传递当前的评论对象，让控制显示弹出层的变量的状态卸载，$on 事件监听里。

4.2 封装内容组件

• 标题 narbar 组件
• 原始评论项，复用之前封装的 comment-item.vue 组件
• 全部回复标题 cell 单元格组件
• 回复评论列表，复用之前封装的 article-commment.vue 组件

• 发表回复评论按钮 button 组件

4.3 处理头部

4.4 处理当前评论项

① 在 comment-item.vue 组件中点击回复按钮的时候把评论对象给传出来

② 在文章详情组件中接收处理

③ 在详情组件中将 currentComment 传递给 comment-reply.vue 组件

④ 在 comment-reply.vue 组件中声明接收

⑤ 在 comment-reply.vue 组件中展示当前评论，复用之前封装的comment-item组件

4.5 展示评论回复列表

基本思路：

• 回复列表和文章的评论列表几乎是一样的

• 重用把之前封装的评论列表

4.6 解决弹层中组件内容不更新问题

弹层组件：

• 如果初始的条件是 false，则弹层的内容不会渲染

• 程序运行期间，当条件变为 true 的时候，弹层才渲染了内容

• 之后切换弹层的展示，弹层只是通过 CSS 控制隐藏和显示

弹层渲染出来以后就只是简单的切换显示和隐藏，里面的内容也不再重新渲染了，所以会导致我们的评论的回复列表不会动态更新了。解决办法就是在每次弹层显示的时候重新渲染组件。v-if是条件渲染， true渲染元素节点， false则不渲染元素节点。

4.7 发布回复

• 复用之前封装的 post-comment.vue 组件

• 解决无法直接修改属性的问题：

• 说明：
  • vue 不可以直接修改 props 中的某个对象数据，但是可以定义在 data 中定义一个新的对象数据，让 data 的对象数据和 props 中的这个对象数据指向同一块内存空间， 这样就可以修改 data 中的数据，就可以修改 props 中的这个数据了。

• 发布回复组件中需要使用 articleId，但是 articleId 是来自于文章详情组件，即文章详情组件是发布回复评论的组件的祖先。这种时候传值的方式只能是 eventBus 或者注入与依赖（provide inject）

• 但是使用 eventBus 的话，一般是祖先组价中触发了某个事件才能在接收的后代组件中监听到。传递的值在视图中使用了的话，很可能导致视图更新不及时。
• 所以最好就是采用依赖注入的形式。祖先组件中提供这个贡献的值，后代组件直接注入使用。

祖先组件：

后代组件：