本篇文章主要介绍了简易 Vue 评论框架的实现(父组件的实现)，内容挺不错的，现在分享给大家，也给大家做个参考。
最近看到一个需求：
实现一个评论功能，要求对评论列表进行分页显示
对相应模块实现组件化
能显示发布者、发布时间以及内容
乍一看不是很难，但是在具体的实现上还是遇到了一些问题。此外，因为第一次使用 vue ，看文档看的也是一脸懵逼，话不多说，下面来分析一下，具体每个模块是怎么实现的。
源码地址
评论表单代码：
<!-- 文档结构区开始 -->
<template>
<p id="comment" >
<Userp @transferUser="getInput" ></Userp>
<Commentp :List="List"></Commentp>
<Pagep @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></Pagep>
</p>
</template>
<!-- 文档结构区结束 --><!-- js 控制区开始 -->
<script>
//引入组件 commentInput、commentList、pagination
import Userp from './commentInput.vue'
import Pagep from './pagination.vue'
import Commentp from './commentList.vue'
export default {
//声明组件名
name: 'comment',
//包含实例可用组件的哈希表
components: {
Userp,
Pagep,
Commentp
},
//声明组件参数
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 控制区结束 -->以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于VUE-地区选择器(V-Distpicker)组件的使用介绍
以上是关于Vue评论框架的实现(父组件的实现)的详细内容。更多信息请关注PHP中文网其他相关文章！
