vue.js项目实战运用篇之抖音视频APP-第十节：评论列表功能

本文链接：https://blog.youkuaiyun.com/My_IT_Study/article/details/117127454

本文档详细介绍了如何在Vue.js项目中实现抖音视频APP的评论列表功能，包括评论列表布局创建、功能函数定义以及父子组件间的响应传值。通过在视频列表组件中设置布局和事件监听，结合$emit触发父组件的自定义事件来完成评论功能。项目源代码托管在GitHub，供学习和交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

第十节：评论列表功能

回顾及介绍

在第七节中我们实现了点评快捷键功能的组件，在这一章节中将进一步了解其中的点评功能的具体实现及父子组件的响应传值的解说。

功能实现步骤

1.在视频列表组件中创建评论列表布局
2.定义评论功能函数
3.在点评快捷键组件中定义响应函数
【温馨提示】
视频列表组件地址：common/components/index/VidoeList；
视频列表组件地址：common/components/index/RightBar。

功能实现

1.在视频列表组件中创建评论列表布局
紧接着滑动组件的同级，创建布局，代码如下：

 <!--评论-->
    <transition name="up">
      <div class="comment-wrap" v-if="showComment">
        <div class="comment-list">
          <div class="comment-top">
            <div class="number">15W条评论</div>
            <div class="close" @click="close">
              <span class="iconfont icon-guanbi" style="font-weight: bold;font-size: 13px"></span>
            </div>
          </div>
          <div class="comment-body">
            <!-- 评论列 -->
            <div class="comment-box">
              <div class="comment-item">
                <img class="user-pic" src="../../../assets/images/avatar-1.jpg" alt />
                <div class="item-info">
                  <div class="replay">
                    <p class="name">快乐仔逛学习</p>
                    <p
                      class="replay-des"
                    >快乐仔每天在学习</p>
                    <p class="time">03-