Vue 组件的封装（以表格的页码为例）
其实就是父子组件之前的传值，以及事件响应
1 准备好子组件的数据输入，定好 props 里面的数据、类型。
子组件：
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageNo"
:page-sizes="pageSizes"
:page-size.sync="curSize"
:layout="layout"
:total="total"
>
</el-pagination>
</div>
这个就是页码组件（单独的一个子页面，），在通过props接收传入参数（父组件传给子组件的值）
子组件：
props: {
currentPage: {
type: Number,
default: 1,
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 40];
},
},
pageSize: {
type: Number,
default: 10,
},
total: {
type: Number,
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper',
},
3.准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。（后面详解）
$emit的使用(暴露组件方法)
子组件：
methods: {
handleSizeChange() {
this.$emit('getList');
},
handleCurrentChange() {
this.$emit('getList');
},
},
父组件中有一个getList（）的获取数据的方法，，，将父组件的方法注入子组件 @getList="getList" ，然后在子组件中通过 $emit 调用他，并传递参数。达到修改的目的。
父组件：
<
:current-page.sync="listQuery.pageNo"
:page-size.sync="listQuery.pageSize"
:total="rows"
@getList="getList"
>
</Pagination>
