Vue3.0手把手教你封装分页组件与API调用示例

在 Vue 3.0 中，手动封装分页组件是一项常见的任务，它可以帮助开发者更高效地处理数据分发和状态管理。以下是如何在项目中实现这样一个分页组件的详细步骤。 首先，要在父组件中引入封装好的分页组件。在这个例子中，父组件`goods-comment.vue`导入了名为`XtxPagination`的子组件，并通过 props 将需要传递给分页组件的参数绑定上去。这些参数包括： 1. `@change-page`: 一个自定义事件，当用户点击分页按钮时，会触发这个事件并传递新的页码给父组件，以便更新状态或重新加载数据。 2. `pagesize`: 每页显示的记录数量，通常由用户设置或者前端配置。 3. `total`: 总记录数，这是通过调用后端接口获取的，用于计算总页数。 4. `page`: 初始化时显示的页码，默认值为1。 父组件中的`findCommentListByGoods`方法是用于与后端交互的接口，它根据商品ID、筛选条件（如`reqParams`对象）来获取评论列表，并更新`total`和`list`的状态。 接着，在`setup()`函数中，我们使用Vue 3的响应式对象`reactive`来创建`reqParams`，并监听其变化，以便在参数改变时及时刷新评论列表。这里还使用了`watch`函数，它会在参数首次设置时立即执行，确保总记录数和评论列表在组件挂载时就已正确加载。 `changePage`函数接收新的页码，更新`reqParams`的`page`属性，然后再次调用接口以加载新的评论数据。同时，页面导航链接的样式也根据当前页码进行动态调整，比如禁用“上一页”按钮，只在当前页不为1时显示页码选择链接。 子组件`xtx-pagination.vue`则负责呈现分页的UI，包括上一页、下一页的链接，以及中间的页码指示。每个链接都绑定了`changePage`方法，传递当前页码作为参数，确保点击后能够正确切换到对应页。 总结来说，手动封装分页组件在Vue 3.0中主要包括组件通信（props和自定义事件）、响应式数据管理（`reactive`和`watch`）、以及前端与后端的交互逻辑。这使得在复杂的前端应用中实现灵活且高效的分页功能变得更加容易。