组件封装（一)vue+element 二次封装分页组件

目的： 当然是为了提高代码质量，节约时间，组件复用了。好了，话不多说直接上代码了。有不同意见的请多指教。

一、当前分页组件

  <div class="pagination">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    pageSizes: { // 页码选项
      type: Array,
      default: ()=>{
        return [10, 20, 30, 40]
      }
    },
    pageSize: { // 页码
      type: Number,
      default:()=> {
        return 10
      }
    },
    total: { // 总条目数
      type: Number,
      default: ()=>{
        return 0
      }
    },
    currentPage: { // 当前页
      type: Number,
      default: ()=>{
        return 1
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    // 页码变化时
    handleSizeChange(val) {
      console.log('pageSize', val)
      this.$emit('handlePageChange', {page:1, pageSize: val})
    },
    // 当前页变化时
    handleCurrentChange(val) {
      console.log('page', val)
      this.$emit('handlePageChange', {page: val, pageSize: this.pageSize})
    }
  }
};
</script>
<style lang="scss" scoped>
 .pagination {
   display: flex;
   justify-content: center;
 }
</style>

二、父组件

  <div>
    <pagination 
      @handlePageChange="handlePageChange" 
      :currentPage="pageInfo.page"
      :pageSize="pageInfo.pageSize"
      :total="total"
    >
   </pagination>
  </div>
</template>
<script>
import pagination from '@/components/pagination'
export default {
  components: {
    pagination
  },
  data() {
    return {
      pageInfo: {
        page: 1,
        pageSize: 20
      },
      total: 20
    }
  },
  mounted() {},
  methods: {
    handlePageChange(val) {
      console.log(val, '分页')
      this.pageInfo = val
    }
  }
}
</script>
<style lang="scss" scoped>
</style>`