vue 通用table组件（子组件）获取父类分页组件的currentPage和pageSize

子组件：
<template>
  <el-table :data="tableData" :newPage="newPage" :newPageSize="newPageSize" border>
    <el-table-column
      type="index"
      :index="indexMethod"
      width="50"
      align="center"
    ></el-table-column>
    <!--prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值),align 设置列的相对位置-->
    <el-table-column v-for="(item,key) in tableKey"
                     :key="key"
                     :prop="item.prop"
                     :label="item.label"
                     :minWidth="item.minWidth"
                     :align="item.align"
                     :fixed="item.fixed"
    ></el-table-column>

  </el-table>

</template>

<script>

  export default{

    name: 'newTable',

    data(){

      return{

      }

    },

    methods: {
      //翻页修改索引
      indexMethod(index){
        return (this.newPage-1)*this.newPageSize+index+1;
      },
    },

    props:{
      tableKey: {
        type: Array,
        default: []
      },
      tableData: {
        type: Array,
        default: []
      },
      //newPage和newPageSize完全是为了实现自定义分页的索引
      newPage:{
        type:Number,
        default:1
      },
      newPageSize:{
        type:Number,
        default:10
      }

    },

  }

</script>

父组件：

<template>
  <div>
    <newTable :tableData="tableData" :tableKey="tableKey" :newPage="newPage" :newPageSize="newPageSize" v-loading="loading" style="width: 95%;margin-top: 5px;margin-left: 25px;"></newTable>
    <div class="block" style="width: 95%;text-align: center;margin-left: 25px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordSize">
      </el-pagination>
    </div>
    
</template>

<script>

  import newTable from '../../components/newTable';
  import $ from "jquery";
  export default {
    data() {
      return {
        //table
        tableData: [],
        tableKey: [],
        loading:true,
        //pagination
        currentPage: 1,//初始化当前页码
        pageSize:10,//初始化页面显示条数
        recordSize:0,//初始化数据总数
      };
    },

    //页面加载完成时调用
    mounted() {
      console.log("111");
      //表格字段和样式初始化
      this.getTableKey();
      //表格数据初始化
      this.getTableData();
    },

    //局部注册组件
    components: {
      newTable,
    },

    methods:{

      back(){
        this.$router.go(-1);//返回上一层
      },

      //获取指定类型页面的字段，名称，格式等信息
      getTableKey(){
        let that = this;
        let param={
          "XX" : this.$route.query.type,
          "XX" : this.$route.query.type
        };
        $.ajax({
          async: true,
          cache: false,
          //后台用@RequestBody接收数据，如果没有contentType如下设置则会提示not support
          contentType: "application/json;charset=UTF-8",
          //对于特殊的数据做一次转义
          data:JSON.stringify(param),
          type: "POST",
          dataType: "text",
          url: "XXX",
          success: function(result) {
            that.tableKey = eval(result);
          },
          error: function(data) {
            // 请求失败
            that.$alert("Server error, please contact administrator", "", {
              confirmButtonText: "Comfirm",
              callback: action => {}
            });
          }
        });
      },

      //请求数据
      getTableData(){
        let that = this;
        that.loading = true;
        let param={
          "XX" : this.$route.query.date,
          "XX" : this.$route.query.type,
          "rows" : that.pageSize,
          "page" : that.currentPage,
        };
        $.ajax({
          async: true,
          cache: false,
          //后台用@RequestBody接收数据，如果没有contentType如下设置则会提示not support
          contentType: "application/json;charset=UTF-8",
          //对于特殊的数据做一次转义
          data:JSON.stringify(param),
          type: "POST",
          dataType: "json",
          url: "XXX",
          success: function(result) {
            that.recordSize = XXX;
            that.tableData = result;
            that.loading = false;
          },
          error: function(data) {
            that.loading = true;
            // 请求失败
            that.$alert("Server error, please contact administrator", "", {
              confirmButtonText: "Comfirm",
              callback: action => {}
            });
          }
        });
      },

      //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.newPageSize = val;
        this.getTableData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.newPage = val;
        this.getTableData();

      }

    },
    beforeRouteLeave(to,from,next){
      to.meta.keepAlive = true;
      next();
    }
  };
</script>


<style scoped>
  .el-table th>.cell {
    text-align: center;
  }
</style>

上面的代码因为一些原因做了处理，主要的方式就是在子组件的tabel上面绑定参数，然后在props中设置类型和初始值

在父组件中也绑定一样的参数（最好不要和其他参数有冲突）

绑定值后，在父组件中相应方法中获取值即可