main.js注册：
h(App)
})
pageHome.vue引用：
效果预览：
四.分页组件实现逻辑分析
我们分析一下如何实现我们的分页组件：
从分页组件考虑：
分页组件需要显示页数，那么就需要传递给分页组件总用多少页这个状态，
上一页和下一页存在不可用状态，在第一页上一页不可用，所以要把当前所在页数传递，同样页数的焦点位置也需要它判断，
然后就是方法，我们页数和按钮的点击都是发起请求，携带的参数就是当前点击的页数，
1.总页数，当前所在页，可在父组件传递进入
2.发起请求的方法可以通过组件交互通信实现
1的数据都是接口会返回给我们的，我们直接以属性传递即可：
2的实现也很简单，我们其实已经处理模拟使用过了：
我们只需要自定义事件，让分页组件$emit即可：
pageHome.vue:
五.分页组件逻辑编写
divuePage.vue我们接受了这些传递的内容，总页数和当前所在页，然后点击第一页触发自定义事件，传递给父组件一个1，获取第一页数据：
2
3
4
1.页数显示
我们的首要工作就是把页数显示出来，我们已经接收了总页数，其实这个问题很容易解决，我们设置一个计算属性，属性依据总页数生成一个数组，从1到n即可：
显示：
这样还不够健壮，还有一个就是总页数5做分界线，大于5就显示当前到后4个，
比如在第3页，显示：3 4 5 6 7
第2页，显示：2 3 4 5 6
好了我们加入一些小的逻辑判断：
我们要给当前页加一个类名标识，已经获取当前的页数了，我们加一个判断就可以了，在v-for中：
我们在加入点击事件，拿到点击的item就是要请求后台数据的参数page:
定义这个方法：
完整代码：
效果测试：
2.第一页和最后一页处理
这个很简单，只是传递page参数，我们已经获取总页数，直接设置即可！
3.上一页和下一页处理
这个对比第一页需要加入特殊的处理，当前是第一页，这个按钮就不可用状态，下一页一样的逻辑判断当前是不是在最后一页：
调用位置加入事件，在加一个是否可用的类名：
全部代码：
效果测试：
4.跳页处理
这个我们获取输入框的值，直接调用，不过对输入的内容必须有一些判断限制：
加一个data:
使用位置：
5.显示总页数
这个是最简单的：
六.分页全部代码和测试
divuePage.vue:
我们现在在pageHome.vue做了使用，这个模拟数据包含7页，我们在另外两个组件也使用分页组件，测试小于5页和只有1页的效果：
直接粘贴就可以在另外的组件使用。
只有1页：
小于5页：
测试没有太大问题！
七.优化和改进建议
当然不是样式的优化，这个需要设计的参与，我们还是显示的优化和改进，比如：
我们是不是该有一个...
还有就是...
可以参考别的分页效果，然后你可以不断的改进！
八.完整代码
main.js:
h(App)
})
App.vue:
divuePage.vue:
总结
以上所述是小编给大家介绍的Vue.js分页组件实现：diVuePagination的使用详解。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
