最近開發後臺專案需要寫一個vue的分頁元件，所以把寫好的元件分享到這個上面加深一下印象：
看了下寫的還是比較多的最開始是父子元件之間的通訊。
父元件container裡面的內容

<template>
//模板
    <div>
        <div class="search">
            <input type="text" placeholder="請輸入要搜尋的內容">
        </div>
        <div class="content">
          <div class="lists">
            <ul>
              <li>
                <div>
                  <div class="displays">
                    <p>顯示時間：</p>
                    <p>顯示內容：</p>
                  </div>
                  <ul class="lists">
                    <li v-for="pages in pagedata">
                      <p v-text="pages.date"></p>
                      <p v-text="pages.message"></p>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
            <div class="page">//這裡面的就是呼叫的pagination的元件
              <pagination :total="total" @fetchDatas="fetchDatas"></pagination>
            </div>
          </div>
        </div>
    </div>

</template>

<script>
//js
    import pagination from "./pagination.vue";//通過import載入元件
    export default{
        name: 'container',
        components: {
          pagination
    },
    data(){
        return {
            pagination:0,      //獲取的頁數
            current:0,         //當前頁數預設為0
            getpage:'',        //獲取的接口裡面的資料
            pagedata:'',       //獲取的頁數裡面的資料
            total:''           //獲取的總條數
            pageNumber:10      //每頁顯示多少條
        }
    },
    munted(){
        this.fetchDatas(this.current,this.pageNumber) //呼叫函式把頁數和要顯示的條數傳進去
    }，
    methods:{
        fetchDatas:async function (index,pN) {
            let params={
                index:'index',
                pagesize:'pN'
            };
            const res = await this.http.get(this.api.container,params)//獲取介面資料
            this.getpage = res.data.data //賦值
            this.pagedata = this.getpage.records //拿到資料介面裡自己想要顯示的
            this.total = this.getpage.total //拿到資料的總條數
        }
    }
</script>

<style>
//樣式
樣式就不寫了，身為前端自己除錯就OK了;
</style>
 

這是父元件裡面的介面的呼叫，下面就是子元件裡面需要把點選事件傳給父元件，然後父元件通過子元件傳遞的值來進行一系列的操作；
子元件pagination的內容：

    <templete>
        //模板
        <div class='page-warp'>
            <ul class='pagination'>
                <li :class="{'disabled':this.current < 1}">
                    <a href='javascript:;' @click='clickCurrent(current-1)'>
                        上一頁
                    </a>
                </li>
                <li :class="{'disabled':this.current < 1}">
                    <a href="javascript:;" @click="clickCurrent(0)" >
                        1
                    </a>
                </li>
                <li :class="{'disabled':this.current < 1}">
                    ···
                </li>
                <li v-for="page in pagination">
                    <a
                      :class="{skin:page == current+1,'disabled':page < current || page > current+2 || page == 1 || page == pagination }"
                      v-text="page"
                      href="javascript:;"
                      @click="clickCurrent(page-1)">
                    </a>
                </li>
                <li :class="{'disabled':this.current < 1}">
                    ···
                </li>
                <li :class="{'disabled': this.current+1 == pagination}">
                    <a v-text="pagination" href="javascript:;" @click="clickCurrent(pagination-1)">
                    </a>
                </li>
                <li :class="{'disabled': this.current+1 == pagination}">
                    <a href="javascript:;" @click="clickCurrent(current+1)">
                      下一頁
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                      共<span v-text="pagination"></span>頁
                    </a>
                </li>
            </ul>
        </div>
    </templete>

    <script>
        //js
        export default {
            name:'pagination',
            props:['total'],//父元件傳過來的總條數
            data(){
                return {
                    current:0,      //當前頁數
                    pagination:'',  //可以分的頁數
                    pageNum:10,     //每頁顯示的條數，預設為10
                    totals:''       //總條數
                }
            },
            watch:{
                //這裡用到了watch來監聽初始父元件傳過來的值
                total (e) {
                    this.totals = e;
                    this.pagination = Math.ceil(this.totals / this.pageNum);//拿到可以分的頁數
                }
            },
            methods:{
                //點選事件獲取當前頁數傳給父元件
                clickCurrent (index) {
                    if( index < 0 || index > this.pagination - 1 ){
                        return
                    }else {
                        this.current = index;
                        let data = {
                            index : index,
                            pN : this.pageNum
                        };
                        this.$emit('fetchDatas',data.index,data.pN);//這裡是關鍵點選事件裡面就是依靠$emit來傳值給父元件的，具體的可以參考vue的api
                        寫到這裡也基本上就完成了；
                    }
                }
            }
        }

    </script>

    <style>
        //樣式
        .pagination > li {
            display: inline;
          }

          .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:hover {
            color: #777;
            cursor: not-allowed;
          }

          .pagination > li > .skin {
            color: deepskyblue;
          }

          .pagination > li > a, .pagination > li > span {
            padding: 3px 5px;
            color: #000;
          }

          .disabled {
            display: none;
          }
    </style>
 

以上就是專案中寫的分頁元件，歡迎大家start，樣式有點簡陋大家湊合這看，相信身為前端的你一定會寫出來狂拽炫酷吊炸天的好看的樣式的~~~