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.实现效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。