簡易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 控制區結束 -->