文章说明：转载来源：https://blog.csdn.net/h1lin0010/article/details/80626312

项目中分别有三个组件

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
  : 
  this
  .fanwei
   }
   })
  .
  then(
  res 
  => {
  this
  .list 
  = res
  .data
  .list
  console
  .
  log(
  this
  .list) 
   })
  .
  catch(
  function(
  error) {
  console
  .
  log(error) 
   }) 
  }, 
    addComment
    : 
    function(
    data) {
    let index 
    = data[
    1] 
    if (
    this
    .type 
    == 
    0) {
    this
    .list[index]
    .comment
    .
    push({
     name
    : 
    '
    session
    ',
     time
    : 
    getTime(),
     con
    : data[
    0],
     reply
    : []
     }) 
     } 
    else 
    if (
    this
    .type 
    == 
    1) {
    this
    .list[index]
    .comment[
    this
    .chosedIndex]
    .reply
    .
    push({
     responder
    : 
    '
    aaaa
    ',
     reviewers
    : 
    this
    .list[index]
    .comment[
    this
    .chosedIndex]
    .name,
     time
    : 
    getTime(),
     content
    : data[
    0]
     })
    this
    .type 
    = 
    0 
     }
     },
    changeCommer
    : 
    function(
    name, 
    index) {
    this
    .oldComment 
    = name 
    this
    .chosedIndex 
    = index 
    this
    .type 
    = 
    1 
     },
    canelCommit
    : 
    function() {
    this
    .type 
    = 
    0 
     },
    commentshow
    : 
    function(
    index) {
    this
    .list[index]
    .openbtn 
    = 
    !
    this
    .list[index]
    .openbtn 
     }
     },
     components
    : {
     SearchWordBtn
    : SearchWordBtn,
     RepLy
    : RepLy,
     CommentText
    : CommentText
     },
  }

回复组件

<
  template>
   <
  div 
  class=
  "reply-box"
   >
   <
  p 
  v-if
  =
  "comment.length==0"
  >暂无评论，我来发表第一篇评论！</
  p>
   <dl v-else>
   <dd 
  class="dynamic-pinglun dyn-huifu" 
  v-for
  ="(item,index) in comment" 
  :index
  ="index" 
  :key
  ="item.index">
   <ul class="box">
   <li class="left">
   <img :src="item.img" alt="">
   </li>
   <li class="right">
   <span class="ame">{{item
  .name}}</
   span>

  <span class="text">{{itemcon}}</pan>
 <p 
  class=
  "time">{{item.time}}</
  p>
 </i>
<div class="clear"><
/div>
 
  <div 
  class="huifu-btn" @click="hangecomer(item.name, index)">回复</
  div>
 
  </ul>
 <
  div v-if="item.reply">
 
  <
  div class="two-huifu" v-if="item.reply.
  length 
  > 
  0
  "> 
  <ul class="box twobox" v-for="reply in item.reply" :key="reply.index">
 <li class="left">
 <img src="../../../static/images/touxiang.png" 
  alt="">
  </li>
 <li class="right">
 <span class="name">{{reply.responder}}@{{reply.reviewers}}:</span>
 <span class="text">{{reply.content}}</pan>
 <p
  class="time">{{replytime}}</
  p>
  </li>
 <
  div 
  class="huifu-btn" @click="changecomer(reply.responder, index)">回复</div>
 </ul>
 </
  div>
 </
  div>
 </dd>
  </
  dl>
 </
  div>
</
  template>
<
  script>
export 
  default {
  name:'reply',
  props: ['comment'],
  methods:
 {hcangecomer: function (name, index) {
  this.$emit("change", name, index) 
 }
  }
}
</
  script>
 <style scoped lang="scss" ype="text/scss">
 .box {
   overflow: 
  hidden;
margin-bottom: 15px;.left {
 width: 30px;
 height: 30
  px;
 float: left;
img {width: 100%;
 height: 100%;
 }
}
.right {
 float: left;
  width: 90;
%
  padding-left: 10px;
 box-sizing: 
 border-box;
input {
  width:99%;
  height: 26px;
  vertical-align: top;
 }
 }
 }
  .two-huifu {
 margin:10px 0;
.right {
 width: 90%;
}
 }
.twobox {
  overflow: hidden;
  margin-left: 32px;
  background: #eaeaec;
  padding:10px;
  border-bottom: solid 1px #d9d9d9;
  margin-bottom: 0
 }
  .twobox:last-child {
  border:0
 }
 .huifu-btn {
  float: right;
  }
 .time {color: #808080;font-size: 12px;}
  .dyn-huifu {
  padding-top:15px;
  border-top:solid 1px #d9d9d9;
  }
</
  style>

输入文本组件