vue 实现评论回复功能

最新推荐文章于 2025-07-06 15:58:57 发布

原创

最新推荐文章于 2025-07-06 15:58:57 发布 · 2.8w 阅读

38 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue项目中实现评论和回复功能。通过动态组件dynamic、回复组件reply和评论输入框commenttext，结合异步数据获取，展示评论内容并提供回复操作。在父组件中初始化数据，并从后台获取文章动态信息。

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

参考文档https://blog.youkuaiyun.com/weixin_35987513/article/details/53748707

项目中分别有三个组件

1.dynamic (父组件)

2.reply (子组件评论的内容区块)

3.commenttext (子组件评论的输入框)

首先在父组件，先通过异步获取到文章动态的数据，

  < 
 div 
 class= 
 " 
 dy_list 
 " 
 v-for 
 = 
 "(item, index) 
 in list 
 " 
 :key 
 = 
 "item 
 .index 
 " 

在data中初始化数据

 
  data() { 
   
  return { 
   
   list 
  : [], 
 
   ajaxUrl 
  :'此处为异步接口', 
 
   fanwei 
  : 
  ' 
  0 
  ', 
 
   type 
  : 
  0, 
  // 0为评论作者 1为评论别人的评论 
 
   oldComment 
  : 
  null, 
  // 旧评论者的名字 
 
   chosedIndex 
  : 
  - 
  1, 
  // 被选中的评论的index 
 
   comment 
  : [], 
 
   show 
  : 
  false 
 
   } 
 
   },

通过异步方法拿到后台的文章的数据

 
  Create 
  : 
  function() { 
   
  this 
  . 
  $nextTick( 
  function() { 
   
  this 
  . 
  fetchData() 
 
   }) 
 
   },

   methods 
  : { 
   
  // 展开全部 
 
  openallC( 
  index) { 
   
  console 
  . 
  log( 
  this 
  .list[index]) 
 
  this 
  .list[index] 
  .openall 
  = 
  ! 
  this 
  .list[index] 
  .openall 
 
   }, 
 
  pagechange 
  : 
  function( 
  currentPage) { 
   
  this 
  .current 
  = currentPage 
 
   }, 
 
  searchthing 
  : 
  function( 
  searchthing) { 
   
  this 
  .Searchthing 
  = searchthing 
 
   }, 
 
  fetchData() { 
   
  this 
  .$ajax 
 
  . 
  get( 
  this 
  .ajaxUrl, { 
   
   params 
  : { 
   
   current 
  : 
  this 
  .current, 
 
   fanwei 
  :