vue分页组件项目实践

最近开发后台项目需要写一个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，样式有点简陋大家凑合这看，相信身为前端的你一定会写出来狂拽炫酷吊炸天的好看的样式的~~~