Vue中封装element-ui中的分页组件

1、新建一个共用的组件页面，如：paging.vue，代码如下：

<template>
  <div>
    <!-- 分页 -->
    <div class="pagingCss">
      <el-pagination 
       @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[15, 30, 45, 60, 150]" 
       layout="total, sizes, prev, pager, next, jumper"
        :total="content.pageTotal"
      ></el-pagination>
    </div> 
    </div>
</template>
<script>
export default { 
 props: {
    content: {},
  }, 
 data() { 
   return {};
  }, 
 created() {}, 
 methods: {
    //每页几条
    handleSizeChange(val) {
      //事件传递 
     console.log(val);
      this.$emit("handleSizeChangeSize", val); 
   }, 
   //第几页 
   handleCurrentChange(val) {
      console.log(val);
      this.$emit("handleCurrentChangeNum", val);
    },
  },
};
</script>
<style scoped>
.pagingCss {
  margin-top: 20px;
}<
/style>

2、要用到的页面引入分页组件，代码如下：

<template>
  <div class="container">
    <paging 
     @handleSizeChangeSize="handleSizeChangeFun"
      @handleCurrentChangeNum="handleCurrentChangeFun"
      :content="content"
    >
</paging>
  </div>
</template>
<script>
import paging from "../../../components/paging.vue";
export default {
  components: { 
   paging,
  },
  data() { 
   return { 
     content: { 
       //传给子组件的总条数，请求接口返回列表的地方赋值 
       pageTotal: 0,
      }, 
     pageSize: 15, 
     pageNum: 1, 
   }; 
 },
  created() {}, 
 methods: { 
   handleSizeChangeFun(val) {
      this.pageSize = val; 
     this.getList(); //更新列表  
  }, 
   //页面点击 
   handleCurrentChangeFun(val) {  
    this.pageNum = val; //当前页
     this.getList(); //更新列表 
   }, 
 },
};
</script>