Purpose: To improve code quality and save time, of course, components are reused. All right, without further ado, let’s get right to the code. If you have different opinions, please advise.

The current page component

<div class="pagination"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"  :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination> </div> </template> <script> export default { props: { pageSizes: {// page options type: Array, default: ()=>{return [10, 20, 30, 40]}}, pageSize: {// page options type: Array, default: ()=>{return [10, 20, 30, 40]}}, pageSize: {// page type: Number, default:()=> {return 10}}, total: {// Total Number of entries Type: Number, default:()=> {return 0}}, currentPage: {// Current page type: Number, default: ()=>{return 1}}}, data() {return {}}, methods: HandleSizeChange (val) {console.log('pageSize', val) this.$emit('handlePageChange', {page:1, pageSize: $emit('handlePageChange', {page: handleCurrentChange(val) {console.log('page', val) this.$emit('handlePageChange', {page: val, pageSize: this.pageSize}) } } }; </script> <style lang="scss" scoped> .pagination { display: flex; justify-content: center; } </style>Copy the code

Parent component

<div> <pagination @handlePageChange="handlePageChange" :currentPage="pageInfo.page" :pageSize="pageInfo.pageSize" :total="total" > </pagination> </div> </template> <script> import pagination from '@/components/pagination' export default { components: { pagination }, data() { return { pageInfo: { page: 1, pageSize: 20 }, total: 20 } }, mounted() {}, methods: { handlePageChange(val) { console.log(val, This.pageinfo = val}}} </script> <style lang=" SCSS "scoped> </style> 'Copy the code