本篇文章主要介紹了簡易 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中文網其他相關文章！
