it is not recommended to encapsulate the request in the paging component. All major UI frameworks have ready-made paging components. The request to the backend is nothing more than the current request page current-page and the number of request entries per page page-size . When the page listens to these two attribute changes of the component, resubmit the request, and the logic is very clear.
if you encapsulate the request in the paging component, you need to pass the request method as a parameter. The component must also be able to accept additional parameters of the request. It is necessary to provide a manual request API. After the request is called back, you have to get the callback from the paging component, right? This can be achieved, but it always feels that the logic is not correct

take element-ui as an example to intercept a segment of my implementation

<el-pagination
    @size-change="tableSizeChange"
    @current-change="tablePageChange"
    :current-page="table.page"
    :page-sizes="table.pageSizes"
    :page-size="table.pageSize"
    :total="table.total"
    layout="total, sizes, prev, pager, next, jumper">
</el-pagination>

data() {
  return {
    search:{                                //
      status: 'ALL',
      create_time: [start, end],
      seller_flag: -1,
      buyer_remark: 0,
      seller_remark: 0,
      address_code: '',
      keyword_trade: '',
      keyword_sku: '',
      keyword_address: ''
    },
    table: {
      pageSize: 20,                         //
      pageSizes: [20, 30, 50, 100],         //
      page: 1,                              //
      total: 0,                             // 
      sort: {},                             //
    },
  }
},

methods: {
  tableSizeChange(size) {
    this.table.pageSize = size;
    this.onSearchSubmit()
  },
  tablePageChange(page) {
    this.table.page = page;
    this.onSearchSubmit()
  },
  onSearchSubmit() {
    this.loading = true;
    this.$store.dispatch('tradeSearch', {
      ...this.search,
      page: this.table.page,
      page_size: this.table.pageSize,
      callback: res => {
        this.loading = false;
        if (!res.code) {
          if (res.data.page === 1) {
             this.table.total = res.data.total
          }
          this.list = res.data.list.map(({id}) => id);
        } else {
          this.list = [];
        }
      }
    });
  },