分页器(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方法中第二个参数
}
}
推荐阅读：