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 = ret.result.counts        list.value = ret.result.items      })    }, {      immediate: true    })    // 控制页码的变化    const changePage = (page) => {      // 修改分页参数，重新调用接口即可      reqParams.page = page    }      } }

2.子组件

src/components/library/xtx-pagination.vue

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

3.实现效果

关于vue3.0手动封装分页组件的方法是怎样的就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。