本文介绍如何在 Vue.js 中构建独立的分页组件，并通过自定义事件与父组件通信。父组件监听页码变化触发 AJAX 请求加载数据，同时更新总页数状态，实现表格与分页器的无缝集成。
Vue.js 分页组件概述
Vue.js 是一款轻量级、高性能且支持组件化开发的 MVVM 框架，其 API 设计简洁，易于上手。
在表格应用中，分页功能通常与表格紧密结合。为了保持结构清晰，建议将分页链接封装为独立的子组件，并将其嵌入到表格父组件中，这种设计模式更为合理。
分页组件实现与通信
首先，需要注册一个分页组件。
JavaScript 代码实现如下：
Vue.component('pagination',{
template:'#paginationTpl',
replace:true,
props:['cur','all','pageNum'],
methods:{
//页码点击事件
btnClick: function(index){
if(index != this.cur){
this.cur = index
}
}
},
watch:{
"cur" : function(val,oldVal) {
this.$dispatch('page-to', val)
}
},
computed:{
indexes : function(){
var list = []
//计算左右页码
var mid = parseInt(this.pageNum / 2);//中间值
var left = this.cur - mid;
var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum);
if (left < 1) {left = 1}
if (right > this.all ) { right = this.all}
while (left <= right){
list.push(left)
left ++
}
return list;
},
showLast: function(){
if(this.cur == this.all){
return false
}
return true
},
showFirst: function(){
if(this.cur == 1){
return false
}
return true
}
}
});接下来定义组件的模板部分。
<script type="text/template" id="paginationTpl">
<nav v-if="all > 1">
<ul class="pagination">
<li v-if="showFirst"><a href="javascript:" @click="cur--">«</a></li>
<li v-for="index in indexes" :class="{ 'active': cur == index}">
<a @click="btnClick(index)" href="javascript:">{{ index }}</a>
</li>
<li v-if="showLast"><a @click="cur++" href="javascript:">»</a></li>
<li><a>共<i>{{all}}</i>页</a></li>
</ul>
</nav>
</script>在 HTML 中引入该组件。
<div id='parentEle'>
...
<pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination>
</div>当用户点击分页链接时，会触发
page-to
自定义事件。我们在 HTML 标签中指定了父组件的
loadList
方法用于处理该事件。子组件只需将当前页码传递给父组件，由父组件负责执行 AJAX 数据加载请求，并更新自身的 pageAll 属性以反映最新的总页数。