分页器(Vue.js)

写了一个简单的分页器，就我博客上用的那个，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方法中第二个参数
  }
}

五：父组件操作子组件方法

子组件中，定义方法：

export default {
    name: "Pagination",
    methods: {
      SwitchPagin:function (bool) {
        this.Pagination = bool;
        this.PageActive = 0;
      }
    }
}

父组件中，直接根据ref定位，调用方法即可：

<Pagination ref="Pagination"></Pagination >

That.$refs.Pagination.SwitchPagin(true);