若依分页实现的学习记录

栖凰凰

已于 2024-04-18 16:50:44 修改

阅读量241

点赞数 6

分类专栏：杂问#Vue 杂问文章标签： vue

于 2024-04-18 14:41:37 首次发布

本文链接：https://blog.csdn.net/Forhy_/article/details/137919072

版权

杂问同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

杂问#Vue

1 篇文章 0 订阅

订阅专栏

前端

前端中中使用的pagination代码如下

<pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
/>

传参理解过程

今天的学习中我尝试理解若依分页的具体实现逻辑，原以pagination和el-table的数据交互点在queryParams上，也就是认为pagination负责修改queryParams，el-table负责使用queryParams

但是在查看el-table代码的时候发现了问题，el-table的标签长这样

<el-table v-loading="loading" :data="memoryList" @selection-change="handleSelectionChange">

我就奇了怪了，这里面都没有这些参数，是如何进行传递的呢，因此很好奇两个封装的组件之间，没有在标签中进行传参是如何进行数据传递的，翻找element-ui源码无果，最后发现，我忽略了一个叫getList方法，事实上应该在pagination被点击发生改变的时候就会重新获取列表，而el-table是通过这个列表去进行渲染的。

由此又发现了自己知识一个薄弱的点，为什么@pagination="getList"这么写，就会在更改分页的时候触发，触发条件是如何定义的，于是去查看了pagination组件的源码，相关代码如下：

handleSizeChange(val) {
      if (this.currentPage * val > this.total) {
        this.currentPage = 1
      }
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }

显然，this.$emit('pagination', { page: this.currentPage, limit: val })这行代码就是在定义这件事情，当handleSizeChange事件发生的时候就会去触发名为pagination的事件

$emit方法是 Vue.js 中用于触发自定义事件的方法。它可以让我们在一个组件中触发一个自定义事件并可选传入参数，这里以key-value形式传入了两个参数，分别是当前页和展示数据条数限制。

那么随之而来的问题就是，这个东西的作用域是多少，总不能整个项目所有同名事件都触发吧，还是说确实是这样，所以带来事件不能重名的限制呢？

经过查询之后未能得到准确的结论，网上的回复大多说是用于父子组件的传值，但很明显当前的用法便不是，于是查阅官方文档，据我目前的理解，这就是一个简单的事件触发器之类的东西，官方演示了触发本组件内事件与触发父组件事件两种用法，但我还是不清楚在此之外的作用域，猜测为所有祖先以及自己，待以后验证

`.sync`的理解

在pagination标签的参数中出现了.sync修饰符，尝试对其具体原理进行理解。

sync是vue中用于实现简单的“双向绑定”的语法糖
vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。所以所谓的双向绑定就是将子向父的数值传递也打通，使之成为“双向”绑定
一个组件上只能定义一个v-model，如果其他prop也要实现双向绑定的效果该怎么办呢？简单的方法是子组件向父组件发送一个事件，父组件监听该事件，然后更新prop，事实上Vue就是以这种模式实现的sync修饰符，这里面也用到了$emit

官方文档：sync修饰符、$emit

后端

后端接口处分页工具
在若依所生成的后端代码中，仅有此处存在分页相关的代码，我是年轻人，我就觉得很神奇啊，理论上来说不应该是mapper里对sql语句进行相关的配置吗，返回也没有看到哪里有total啊。
mapper暂时看不到哪里改了，但是这里的return一定是包含所有需要的数据也就是total和list的，所以进去看一下total怎么来的
打开一看，更懵逼了orz
total溯源
新建个对象就可以getTotal了？可是传进去的list明明是分页后的当页数据，不可能根据这个统计了，那是哪来的呢？至少整个PageInfo类中没有相关代码

没办法了，等我查查资料再继续总结，想不出来了

查询资料之后理解如下

pageHelper使用的方法是创建一个线程，首先接收并存储前端传入的分页参数（存在疑问，这是怎么获取到的相关参数的，后端的list()方法并没有接收相关参数，Memory类及其父类都没有）
对startPage()方法之后的第一个查询进行拦截，并改造sql语句（但这只能解决为什么返回值是当前页数据的疑惑，并不能解决分页数据从哪来的疑惑，例如下一页是否还有，total的值等等）