vueelementelpagination封装分页组件

需求描述&＃xff1a;将分页组件封装为公共组件&＃xff0c;在需要引用分页的页码引入即可。

解决思路&＃xff1a;

假设分页组件为【Page.vue】&＃xff08;子组件&＃xff09;&＃xff0c;两个页面为父组件&＃xff0c;分别为【PageOne.vue】和【PageTwo.vue】

&＃xff08;1&＃xff09;PageOne.vue&＃xff08;父组件&＃xff09;和PageTwo.vue&＃xff08;父组件&＃xff09;需要向Page.vue&＃xff08;子组件&＃xff09;传递总条数【total】&＃xff0c;通过【props】属性传值实现

•       父组件&＃xff1a;【】
•       子组件【props: ["total"]】

&＃xff08;2&＃xff09;子组件需要向父组件传递每页条数【pageSize】和当前页【currentPage】&＃xff0c;使用this.$emit("function",param);   //其中function为父组件定义函数&＃xff0c;param为需要传递的参数。 

•       父组件&＃xff1a;【】
•        子组件&＃xff1a;【this.$emit("pageChange", this.page);】

代码如下&＃xff1a;

【Page.vue】

【PageOne.vue】

【PageTwo.vue】同【PageOne.vue】