如何实现vue3封装自己的分页组件

本篇内容主要讲解"如何实现vue3封装自己的分页组件"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"如何实现vue3封装自己的分页组件"吧!

背景

在浏览列表类型的数据的时候，如果数据比较多一次性全部请求会出现性能损耗以及加载延迟等问题，那么此时分页组件就起到了关键作用，它可以只请求一部分数据，也不会占用太多的页面空间，想看别的数据可以通过页码的改变来发起请求，刷新页面数据

现在我们自己来封装分页组件

组件所需参数

• total 属性 ：用来传递数据总条数

• pagesize 属性 ：每页展示几条数据

• currentPage 属性 ：当前默认页码

• change-page 事件 ：页码改变时触发的事件，参数为当前页码

组件落地代码my-pagination.vue

使用组件

效果

到此，相信大家对"如何实现vue3封装自己的分页组件"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！