简易Vue评论框架的实现(父组件的实现)

最近看到一个需求：

1. 实现一个评论功能，要求对评论列表进行分页显示
2. 对相应模块实现组件化
3. 能显示发布者、发布时间以及内容

乍一看不是很难，但是在具体的实现上还是遇到了一些问题。此外，因为第一次使用 vue ，看文档看的也是一脸懵逼，话不多说，下面来分析一下，具体每个模块是怎么实现的。

评论表单代码：

<!-- 文档结构区开始 -->
<template>
  <div id="comment" >
    <userdiv @transferuser="getinput" ></userdiv>
    <commentdiv :list="list"></commentdiv>
    <pagediv @transferuser="getpage" :totalcount="totalcount" :currentpage="currentpage"></pagediv>
  </div>
</template>
<!-- 文档结构区结束 -->

<!-- js 控制区开始 -->
<script>
//引入组件 commentinput、commentlist、pagination
import userdiv from './commentinput.vue'
import pagediv from './pagination.vue'
import commentdiv from './commentlist.vue'

export default {
  //声明组件名
  name: 'comment',

  //包含实例可用组件的哈希表
  components: {
    userdiv,
    pagediv,
    commentdiv
  },

  //声明组件参数
  data() {
    return {
      totalcount: 0,
      currentpage: 1,
      pagesize: 3,
      totaldata: [],
      list: [],
    }
  },

  methods: {
    //显示评论列表信息的方法
    getinput(msg) {
      //将评论信息保存到评论数组里
      this.totaldata.push({ text: msg })
      //计算评论信息总条数长度
      this.totalcount = this.totaldata.length

      //判断评论总数是否大于单页显示条数
      if (this.totalcount <= this.pagesize) {
       // 显示所有评论
       this.list = this.totaldata
      } else {
       // 截取totaldata中 this.totalcount - this.pagesize 后面的元素进行显示
       this.list = this.totaldata.slice(this.totalcount - this.pagesize)
      }
      //点击评论按钮，默认跳转显示第一页内容
      this.currentpage = 1
      //评论列表倒序显示，即最新评论，显示在最上面
      this.list.reverse()

    },

    // 计算评论列表每一页的显示内容
    getpage(curr, size) {
      this.currentpage = curr

      if (this.totalcount <= this.pagesize) {
        //显示所有评论
        this.list = this.totaldata
      } else {
        var start = this.totalcount - this.currentpage * this.pagesize
        if (start < 0) { start = 0 }
        // 截取totaldata中 [start, start + this.pagesize] 位元素进行显示
        this.list = this.totaldata.slice(start, start + this.pagesize)
      }
      //评论列表倒序显示，即最新评论，显示在最上面
      this.list.reverse()
    }
  },
}
</script>
<!-- js 控制区结束 -->

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。