寫了一個簡單的分頁器，就我部落格上用的那個，Vue.js實現的PC端使用的，如上圖。 自己憑空想的，也不知道合不合理，有機會看看別人怎麼實現的。我的思路是：

首先分頁肯定要寫成一個元件，而且分頁元件要放在一個個的列表頁面元件中。這樣的話頁面元件就是父元件，分頁器是子元件，會涉及父元件與子元件的資料通訊。

一：兩者分工

父元件初始化分頁器，這需要父元件給分頁器傳遞控制顯隱的引數、總資料量以及每頁展示的條數。子元件中根據這些引數渲染出基本的樣式。

分頁器在被點選後，比如點選了某一頁或者點選了上一頁，需要傳遞當前頁給父元件。父元件根據接收到的當前頁碼，請求資料重新整理列表。分頁器的高亮切換、上一頁及下一個樣式切換都在分頁器內部實現。

二：分頁器元件程式碼

<template>
    <div class="Pagination" v-show="Pagination">
        <div :class="PageActive==0 ? 'PageNext PageNextEnable' : 'PageNext'" @click="SelectPage(PageActive-1)">上一頁</div>
        <div :class="PageActive== index ? 'PageNum PageActive' : 'PageNum'" v-for="(item,index) in PageNum" @click="SelectPage(index)">{{ index+1 }}</div>
        <div :class="PageActive+1 == PageNum ? 'PageNext PageNextEnable' : 'PageNext'" @click="SelectPage(PageActive+1)">下一頁</div>
        <div class="PageTotalNum">共{{PageTotalNum}}條</div>
    </div>
</template>

<script>
  export default {
    name: "Pagination",
    data:function () {
      return{
        // 當前選中頁數
        PageActive:0
      }
    },
    methods: {
      // 選擇分頁
      SelectPage:function (SelectPage) {
        var That = this;
        if(SelectPage > -1 && SelectPage < this.PageNum){

          That.PageActive = SelectPage;
          That.$emit('PaginationToParent',SelectPage);
        }
      }
    },
    props:['Pagination','PageTotalNum','PageNum']
  }
</script>
 

三：列表頁使用分頁器

html程式碼

<Pagination v-bind:Pagination=this.Pagination
            v-bind:PageTotalNum=this.PageTotalNum
            v-bind:PageNum=this.PageNum
            v-on:PaginationToParent="ValueByPagition"
></Pagination>

假如列表頁每頁展示16條資料，那初始化頁面時第一次先請求17條資料。判斷得到的資料數量，如果小於等於16條就不渲染分頁器了，如果大於16條就渲染分頁器。

// 顯示分頁器
That.Pagination = true;
//需獲取資料總條數
That.PageTotalNum = data;
//顯示頁碼按鈕使用
That.PageNum = Math.ceil(data / 16);

接收分頁器傳遞過來的當前頁碼，並請求資料，渲染列表

methods:{
  ValueByPagition : function (SelectPage) {
    var That = this;
      this.SQFrontAjax({
        Url: '/api/FriendUrlRead/foreend',
        UploadData: {
        params: {
        PagnationData: {
          Skip:SelectPage * 16,
          Limit:16
        }
      }
    },
    Success: function (data) {
      //渲染列表
      That.FriendsUrlList = data;
    }
  });
}

四：Vue中父子元件傳值語法

1.父元件向子元件傳值

父元件在摸板中，像使用自定義標籤呼叫子元件時，將變數放在子元件上，這樣自動就傳給子元件內部了。

<Pagination v-bind:Pagination=this.Pagination
             v-bind:PageTotalNum=this.PageTotalNum             
             v-bind:PageNum=this.PageNum>
</Pagination>

子元件內部需要宣告props引數，並且這些引數就不用宣告直接在模板中使用了。

export default {
  props:['Pagination','PageTotalNum','PageNum']
}

2.子元件給父元件傳值

子元件傳送：

That.$emit('PaginationToParent',SelectPage);

父元件接收：

首先摸板中呼叫子元件時，繫結v-on方法，與子元件傳送的第一個引數一致。

<Pagination v-on:PaginationToParent="ValueByPagition" ></Pagination>

並且什麼ValueByPagition方法，這個方法接受的引數就是子元件$emit方法中第二個引數

methods:{   
  ValueByPagition :function(SelectPage){
    console.log(SelectPage);//此變數就是子元件$emit方法中第二個引數
  }
}