需求描述:将分页组件封装为公共组件,在需要引用分页的页码引入即可。
解决思路:
假设分页组件为【Page.vue】(子组件),两个页面为父组件,分别为【PageOne.vue】和【PageTwo.vue】
(1)PageOne.vue(父组件)和PageTwo.vue(父组件)需要向Page.vue(子组件)传递总条数【total】,通过【props】属性传值实现
- 父组件:【<page :total="page_total"></page>】
- 子组件【props: ["total"]】
(2)子组件需要向父组件传递每页条数【pageSize】和当前页【currentPage】,使用this.$emit("function",param); //其中function为父组件定义函数,param为需要传递的参数。
- 父组件:【<page :total="page_total" @pageChange="pageChange"></page>】
- 子组件:【this.$emit("pageChange", this.page);】
代码如下:
【Page.vue】
<template>
<div class="page">
<el-pagination
small
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</template>
<script>
export default {
props: ["total"],
data() {
return {
// 页码参数
page: {
currentPage: 1,
pageSize: 10
}
};
},
methods: {
handleSizeChange(val) {
this.page.pageSize = val;
console.log(`每页 ${this.page.pageSize} 条`);
this.$emit("pageChange", this.page);
},
handleCurrentChange(val) {
this.page.currentPage = val;
console.log(`当前页: ${this.page.currentPage}`);
this.$emit("pageChange", this.page);
}
}
};
</script>
<style lang="less">
</style>
【PageOne.vue】
<template>
<div class="pageone">
<page :total="page_total" @pageChange="pageChange"></page>
</div>
</template>
<script>
import Page from "../components/Page";
export default {
data() {
return {
page_total: 100,
page_index: 1, //页码
page_size: 20 //每页展示条数
};
},
components: {
page: Page
},
methods: {
pageChange(item) {
console.log("pageone:", item);
this.page_index = item.currentPage;
this.page_size = item.pageSize;
console.log(`每页展示${this.page_size}条,当前为${this.page_index}页`);
// this.query(); //页面改变后通过query()方法向后台请求数据渲染页面
}
}
};
</script>
<style lang="less">
</style>
【PageTwo.vue】同【PageOne.vue】