二、在Vue中如何使用分页

大家好，今天我将给大家聊聊分页的问题。数据分页是任何项目中都会用到的功能，在讲这个问题的时候，我也特意从网上搜索了一下，各种答案都有，有的网友为了写个分页组件，需要加载很多文件，比如用bootstrap写的组件，就需要加载bootstrap.min.css、字体等等，这种做法只会让分页臃肿，不利于代码复用。网上还有其他类型的分页代码，总感觉不尽人意，没办法，我只能亲自操刀。现在我把代码分析出来，希望对大家有用。

一、创建分页组件（page.vue）

下面我就把代码截图给大家看，只要按照这种方式写就不会有问题，如图所示：

第一页

第二页

以上就是分页的全部代码，是不是很简单，任何人都能写出来。下面我们来看看在页面中如何使用它。

二、如何使用分页？

1、在需要的页面中引用分页

1、实例组件

3、在代码中嵌入组件

说明："this.$fetch"是我写好的公共方法：具体请看“在Vue中如何使用axios跨域访问数据”一文

【在Vue中如何使用axios跨域访问数据】

整体代码如下图所示：

四、后台接口展示

$this->resData('','','')方法如下：

顺便提一下，所有的接口，我们都是用Thinkphp5写的，如果不熟悉TP5的小伙伴们，需要恶补一下啦。页面最终的效果如下：

以上就是我在项目中使用的分页，不清楚的小伙伴们可以联系我们，我们将竭诚为您服务。

下一章我们将奉上“在Vue中如何上传 图片”，这是我自己写的图片上传组件，大家可用拿来就用。

为了更好的服务大家，请加入我们的技术交流群：（511387930），同时您也可以扫描下方的二维码关注我们的公众号，每天我们都会分享经验，谢谢大家。