簡易Vue評論架構的實現(父組件的實現)，vue評論架構組件

簡易Vue評論架構的實現(父組件的實現)，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、paginationimport 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 控制區結束 -->

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。