@[toc] ## 一、封装 pagination组件 **`Pagination.vue`** ```javascript ``` ## 二、在组件中引入，并使用刚刚封装的Pagination组件 **`Test .vue文件：`** ```javascript ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54ac2608d2d2499c8798318704c40ec7~tplv-k3u1fbpfcp-zoom-1.image) 更改total后： ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c02b5337788e432195a4320e0468da3f~tplv-k3u1fbpfcp-zoom-1.image) ## 三、后期更新 **`tip:`** 后期发现，上面的各方法之间要处理的事情大为相同，如分页组件中的 `handleRefreshTable`, `handleSizeChange`,以及 `handleCurrentChange` 的方法，在父组件中最终的作用基本都是，更改需要传递给后台的分页参数（如，页码pageNum 和每页条数 pageSize）,并向后台请求列表数据，那上述封装方式未免繁复，故做了如下更改： 1. 刚说的三个方法触发的是同一个方法，故父组件在使用分页组件的时候，只需绑定一个方法即可。 **`Pagination.vue 文件内容如下:`** ```javascript ``` 引入刚刚的Pagination.vue组件并注册使用： **`Test .vue文件：`** ```javascript ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/145cf584d98549b093f67bf03380c6f0~tplv-k3u1fbpfcp-zoom-1.image) 1. 更多详细的封装，请参考：[PanJiaChen的vue-element-admin](https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/Pagination) 2. 关于`.sync `修饰符，请参考[官网](https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6)