效果图
get获得的参数(通过父组件传递到子组件):
pageNo: 当前页数
pageSize:每页多少条数据
total:数据总条数
continues:连续页码数
计算出来的数:totalPage 总页数 =向上取整Math.ceil(this.total/this.pageSize)
拓展知识:
$emit 子组件可以使用 $emit 触发父组件的自定义事件
父组件GET请求参数
getPageNo(pageNo){
// 整理带给服务器参数
this.searchParams.pageNo=pageNo;
// 再次发请求
this.getData()
},
子组件HTML部分
<template>
<div class="pagination">
<!-- 上一页
当前页为1时,上一页不可点击;
点击上一页,页数-1并且再次向服务器请求数据-->
<button :disabled="pageNo