在element-ui的基础上封装组件

///  通过props来把参数传递给父组件  page-size  在props接收的时候会自动的变成pageS
<template>
 <paging-query :totals="total" :page-size="pageSize" @handleSizeChangeSub="handleSizeChangeFun" @handleCurrentChangeSub="handleCurrentChangeFun"></paging-query>
  
  </div>
</template>
<script>
import PagingQuery from "@/components/paging-query";
export default {
  data() {
    return {
      total: 300,////   父组件把total 传递给子组件  :totalss="total"   那么子组件接收的就是totalss     子组件里面出发这个事件 handleSizeChangeSub
      pageSize: 0,
    
  },
  components: {
    PagingQuery
  },
  methods: {
  handleSizeChangeFun(v) {
    console.log(v);
　　this.pageSize = v;
// 　　this._enterpriseList(); //更新列表
},

handleCurrentChangeFun(v) { //页面点击
　　this.pageNum = v; //当前页
// 　　this._enterpriseList(); //更新列表
},

  }
};
</script>
<style>
</style>

<template>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totals" style="float:right;">
    </el-pagination>
</template>
<script type="text/ecmascript-6">
export default {
    components: {

    },
    data() {
        return {

        }
    },
    props: {
// 接收父组件传递过来的值
        pageSize: {
            type: Number,
            default: 10
        },
        totals: {
            type: Number,
            default: 1
        }
    },
    watch: {

    },
    methods: {
        //每页展示条数
        handleSizeChange(val) {
            //事件传递    handleSizeChangeSub 是父组件定义的自定义事件
            this.$emit('handleSizeChangeSub', val);
        },
        //当前页
        handleCurrentChange(val) {
            //事件传递  在this.$emit的同时,携带参数
            this.$emit('handleCurrentChangeSub', val);
        }
    },
    // 过滤器设计目的就是用于简单的文本转换
    filters: {},
    // 若要实现更复杂的数据变换，你应该使用计算属性
    computed: {

    },
    created() {

    },
    mounted() {},
    destroyed() {}
}
</script>
<style lang="" type="text/css" scoped>
</style>