How does vue3.0 manually encapsulate paging components?

This article will explain in detail how vue3.0 manually encapsulates paging components, and the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

The details are as follows

1. Parent component introduction

Src/views/goods/components/goods-comment.vue

/ / adjust the interface import {findCommentListByGoods} from'@ / api/product.js' export default {setup () {/ / filter condition prepare const reqParams = reactive ({/ / current page number page: 1, / / number of entries per page pageSize: 10, / / whether there is a picture hasPicture: null, / / filter condition tag: null / / sorted fields sortField: null}) / / changes in listening parameters watch (reqParams, () = > {findCommentListByGoods (goods.value.id, reqParams) .then (ret = > {total.value = ret.result.counts list.value = ret.result.items})} {immediate: true}) / / controls the change of page numbers const changePage = (page) = > {/ / modify paging parameters Re-invoke the interface to reqParams.page = page} 2. Sub-component

Src/components/library/xtx-pagination.vue

Previous page. {{item}}. Next page import {computed, ref} from 'vue'export default {name:' XtxPagination', props: {total: {type: Number, default: 80}, pagesize: {type: Number, default: 10} / / default initial page number / / page: {/ / type: Number, / / default: 1 / /}, setup (props, {emit) Attrs}) {/ / attrs represents the properties passed by the parent component But props does not receive properties This attribute is not responsive / / dynamic page number information / / number of pages per page / / const pagesize = 8 / / total number of pages let pages = Math.ceil (props.total / props.pagesize) / / current page number / / console.log (attrs.page) const currentPage = ref (attrs.page | | 1) / / dynamic page number list const list = computed () = > {/ / when the value of the total passed by the parent component changes The calculation attribute recalculates pages = Math.ceil (props.total / props.pagesize) const result = [] / / the total page number is less than or equal to 5 Greater than 5 if (pages