Web应用程序中资源分页不仅对性能很有帮助，而且从用户体验的角度来说也是非常有用的。在这篇文章中，将了解如何使用Vue创建动态和可用的分页组件。
基本结构
分页组件应该允许用户访问第一个和最后一个页面，向前和向后移动，并直接切换到近距离的页面。
大多数应用程序在用户每次更改页面时都会发出API请求。我们需要确保组件允许这样做，但是我们不希望在组件内发出这样的请求。这样，我们将确保组件在整个应用程序中是可重用的，并且请求都是在操作或服务层中进行的。我们可以通过使用用户单击的页面的数字触发事件来实现此目的。
有几种可能的方法来实现API端点上的分页。对于这个例子，我们假设API告诉我们每个页面的结果数、页面总数和当前页面。这些将是我们的动态 props 。
相反，如果API只告诉记录的总数，那么我们可以通过将结果的数量除以每一页的结果数来计算页数： totalResults / resultsPerPage 。
我们想要渲染一个按钮到 第一页 、 上一页 、 页面数量范围 、 下一页 和 最后一页 ：
[first] [next] [1] [2] [3] [previous] [last]
比如像下图这样的一个效果：
尽管我们希望渲染一个系列的页面，但并不希望渲染所有可用页面。让我们允许在我们的组件中设置一个最多可见按钮的 props 。
既然我们知道了我们想要的组件要做成什么，需要哪些数据，我们就可以设置HTML结构和所需要的 props 。
<template> <ul> <li> <button type="button">« First</button> </li> <li> <button type="button">«</button> </li> <!-- 页数的范围 --> <li> <button type="button">Next »</button> </li> <li> <button type="button">»</button> </li> </ul> </template> Vue.component('pagination', { template: '#pagination', props: { maxVisibleButtons: { type: Number, required: false, default: 3 }, totalPages: { type: Number, required: true }, total: { type: Number, required: true }, currentPage: { type: Number, required: true } } })
上面的代码注册了一个 pagination 组件，如果调用这个组件：
<div> <pagination></pagination> </div>
这个时候看到的效果如下：
注意，为了能让组件看上去好看一点，给组件添加了一点样式。
事件监听
现在我们需要通知父组件，当用户单击按钮时，用户点击了哪个按钮。
我们需要为每个按钮添加一个事件监听器。 v-on 指令 允许侦听DOM事件。在本例中，我将使用 v-on 的快捷键 来侦听单击事件。
为了通知父节点，我们将使用 $emit 方法 来发出一个带有页面点击的事件。
我们还要确保分页按钮只有在页面可用时才唯一一个当前状态。为了这样做，将使用 v-bind 将 disabled 属性的值与当前页面绑定。我们还是使用 :v-bind 的快捷键 : 。
为了保持我们的 template 干净，将使用 computed 属性 来检查按钮是否被禁用。使用 computed 也会被缓存，这意味着只要 currentPage 不会更改，对相同计算属性的几个访问将返回先前计算的结果，而不必再次运行该函数。
<template> <ul> <li> <button type="button" @click="onClickFirstPage" :disabled="isInFirstPage">« First</button> </li> <li> <button type="button" @click="onClickPreviousPage" :disabled="isInFirstPage">«</button> </li> <li v-for="page in pages"> <button type="button" @click="onClickPage(page.name)" :disabled="page.isDisabled"> {{ page.name }}</button> </li> <li> <button type="button" @click="onClickNextPage" :disabled="isInLastPage">Next »</button> </li> <li> <button type="button" @click="onClickLastPage" :disabled="isInLastPage">»</button> </li> </ul> </template> Vue.component('pagination', { template: '#pagination', props: { maxVisibleButtons: { type: Number, required: false, default: 3 }, totalPages: { type: Number, required: true }, total: { type: Number, required: true }, currentPage: { type: Number, required: true } }, computed: { isInFirstPage: function () { return this.currentPage === 1 }, isInLastPage: function () { return this.currentPage === this.totalPages } }, methods: { onClickFirstPage: function () { this.$emit('pagechanged', 1) }, onClickPreviousPage: function () { this.$emit('pagechanged', this.currentPage - 1) }, onClickPage: function (page) { this.$emit('pagechanged', page) }, onClickNextPage: function () { this.$emit('pagechanged', this.currentPage + 1) }, onClickLastPage: function () { this.$emit('pagechanged', this.totalPages) } } })
在调用 pagination 组件时，将 totalPages 和 total 以及 currentPage 传到组件中：