vue3.0手动封装分页组件的方法 vue3.0手动封装分页组件的方法

本文实例为大家分享了vue3.0手动封装分页组件的具体代码，供大家参考，具体内容如下
1.父组件引入 src/views/goods/components/goods-comment.vue

//调接口 import {findCommentListByGoods } from '@/api/product.js' export default{setup(){// 筛选条件准备const reqParams = reactive({// 当前页码page: 1,// 每页的条数pageSize: 10,// 是否有图片hasPicture: null,// 筛选条件tag: null,// 排序的字段sortField: null})// 侦听参数的变化watch(reqParams, () => {findCommentListByGoods(goods.value.id, reqParams).then(ret => {total.value = https://www.it610.com/article/ret.result.countslist.value = ret.result.items})}, {immediate: true})// 控制页码的变化const changePage = (page) => {// 修改分页参数，重新调用接口即可reqParams.page = page}} }

2.子组件 src/components/library/xtx-pagination.vue

.xtx-pagination {display: flex; justify-content: center; padding: 30px; > a {display: inline-block; padding: 5px 10px; border: 1px solid #e4e4e4; border-radius: 4px; margin-right: 10px; &:hover {color: @xtxColor; }&.active {background: @xtxColor; color: #fff; border-color: @xtxColor; }&.disabled {cursor: not-allowed; opacity: 0.4; &:hover {color: #333; }}}> span {margin-right: 10px; }}

知识点：attrs表示父组件传递的属性，但是props没有接收的属性，这种属性不是响应式的（vue3新增）
3.实现效果