本篇文章主要介绍了简易 vue 评论框架的实现(父组件的实现)，内容挺不错的，现在分享给大家，也给大家做个参考。
最近看到一个需求：
实现一个评论功能，要求对评论列表进行分页显示
对相应模块实现组件化
能显示发布者、发布时间以及内容
立即学习“前端免费学习笔记（深入）”；
乍一看不是很难，但是在具体的实现上还是遇到了一些问题。此外，因为第一次使用 vue ，看文档看的也是一脸懵逼，话不多说，下面来分析一下，具体每个模块是怎么实现的。
源码地址
评论表单代码：
登录后复制
//引入组件 commentInput、commentList、paginationimport 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() } },}
登录后复制
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Vue实现返回顶部backToTop的组件
Vue实现返回顶部backToTop的组件
以上就是关于Vue评论框架的实现(父组件的实现)的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2748086.html
