前端菜鸡流水账日记 -- Pagination分页

哈喽哇大家，老规矩，见面先问好，今天是端午节假期后的第一天上班，大家假期开心吗，哈哈哈哈，我还是蛮开心的...

今天这篇笔记要分享得主要是一个分页器，但是不一样得地方是因为，首先是ant组件库得，其次是因为是一个被封装了得分页器，平时我们使用得话可能就直接使用了，这个是封装过得，其实大概是一样得只不过有几个点要注意，也是这个前辈封装得有问题进行修改了，所以来做个记录

1.ant管网地址：https://antdv.com/components/pagination#api 有需要得可以点击直接跳转

2.封装得组件得问题： 封装之后得组件，在页码数变动得时候没有实现完全得联动效果，导致搜索得时候，角标不一致，一个组件中得值没有对应得变化得问题，还有就是变量没有完全区分开得问题，导致根本分不清楚哪个是哪个得current和pageSize

3.解决：

3.1封装得组件内部：

对原本得current和total得变量进行重新定义，与current和total区分开

将原本得showSizeChange事件改为change事件，用作页码改变时调用得方法，同时后边得名字得修改也是为了进行区分

在data中重新定义变量，以及在方法中给定默认值

同时写一个watch监听事件，如果这些值变化得话，那就可以立马监听到并且进行对应得变化

这是组件中得大概得逻辑，但是配合其他得页面使用得话，那肯定就要引入组件，注册组件，之后通过父子传值来实现值得传递，也是相当于我们这个组件是子组件

这里奉上一篇我看过得感觉很好的关于父子传值的讲解的连接，https://blog.csdn.net/weixin_45724850/article/details/131732090

父传子要用props， 父组件通过属性绑定的形式将数据传递给子组件，并在子组件中定义props来接收。子传父用$emit， 通过在子组件中使用$emit方法触发自定义事件，然后在父组件中使用v-on指令监听该事件并执行相应的逻辑。这样子组件就可以向父组件发送消息或传递数据。

我们这里就是用props来接受在父组件中传递进来的值，并且在mounted中进行赋值，实现从一进入页面就可以拿到值并且赋值的效果

因为是分页器，所以从这里基本不需要主动更改数据，所以子传父一般都用不着，就不过多说了，之后遇到我们在详细说，剩下的内容就是在父组件中的了

按照路径引入组件：

注册组件：

使用组件：

在改变分页时给定值，但是有个地方调用接口了之后也要给分页的current和pageSize一个值，否则会出现一个左右不对应的bug，代码就像这样

async getCamerasList(params) {
            const res = await getCameras(params ? params : {}, this.pagination);
            if (res.data.data.info.length == 0) {
                this.videoList = [];
                this.pagination.totalCount = 0;  //总数
                this.pagination.current = 1;    //给值
                this.pagination.pageSize = 4;   //根据需求给，这个是本页显示多少条数据
            } else {
                this.isLoad = true;
                this.pagination.totalCount = res.data.data.total;
                this.videoList = [...res.data.data.info];
            }
        },

这样就实现了一个完整的分页的使用了，虽然可能有些啰嗦，但是主要是我怕我自己后期记不清楚哈哈哈哈，所以大家可以取其精华，去其糟粕，希望可以有帮到大家的地方，好啦，那这篇笔记及也就暂时到这里啦，下次见~~~· 

（完整的组件也已经上传到资源啦~）