其实就是父子组件之前的传值,以及事件响应
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>