Vue-封装一个通用的分页组件，并实现全局注册组件使用

前言
分页无论是在网站和app中用到都很多，开发中经常要使用到，前端有时侯频繁用到分页的功能，每次用到要再次去实现，那么我们为了减少开发的复杂性，提高效率，是可以将它作为一个公共组件封装起来供各个页面来使用！，并注册一个全局组件。
实现思路
1、用到的参数
pageNum: 1 默认第几页
pageSize: 10 一页展示几条
total: 0 总条数
2、用到的传递的参数和方法

:pluspagerMethod=getArticleList
:pageSize=10 每页显示个数,目前固定为10，后期优化可以去实现参数数组选择
:total=0 查询返回的数据总数量
:pageNum=1 具体分页查询的页号
3、数据传递的方法
props 父传子
在父组件中把分页方法传递给子组件
4、实现过程
首先定义一个子组件页面用来封装分页:
在父组件中(使用的页面)引入封装组件(子组件)并注册，然后在页面中使用，在父组件中给标签(注册的组件名)上绑定一个属性， 属性上挂载需要传递的值，通过 props 在子组件(封装文件)接收数据；
在子组件中使用伏组件传递的方法，调用这个分页查询的方法，
代码详解:
封装文件 /src/components/pager/PlusPager.vue

父组件使用子组件，注册子组件的方法：

第一种：在main.js中直接注册

// 引入
import PageTools from '@/components/PageTools'
// 注册为全局组件
Vue.component('PageTools', PageTools)

缺点：如果我们需要注册的全局组件非常多，我们需要一个一个引入，然后分别调用Vue.component方法，main.js文件会变的很大，不好维护。
第二种：使用插件的形式注册
在统一注册的入口文件中

// 引入
import PageTools from './PageTools'
export default {
  install(Vue) {
  // 注册全局组件
    Vue.component('PageTools', PageTools)
  }
}

入口文件注册插件（main.js）

import Components from './components'
Vue.use(Components)

使用文件 /src/views/page/ArticleListPage.vue

data(){
    return {
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        pathName: "",
    },
    articleTotal: 0,
    articleList: [],
    }
}

getArticleList(pageNum) {
      this.queryParams.pageNum=pageNum
      getGpArticlesByCategory(this.queryParams)
        .then((response) => {
          //console.log(response);
          this.articleList = response.rows;
          this.articleTotal = response.total;
        })
        .catch((error) => {});
},

实现效果

至此，有关于分页器的封装就结束啦。