Vue项目中常见问题(30)分页器完成

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

1.替换数据

2.那么total怎么得到呢

3.子给父通信

 分析1:

 分析2:

点击上一页按钮

点击1按钮

 ...不用点

中间部分数字按钮

 点击总页数

 点击下一页

3.整理数据,发请求 

4.点击按钮改变颜色

---

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

1.替换数据

由于我们以前在pages/Search/index.vue中,我们的数据是写死的,所以现在我们要把它们进行替换

由于我们当前页默认是第一页

 由此我们得到了pageNo和pageSize

2.那么total怎么得到呢

我们可以在Search仓库中看到total的数据

 

在pages/Search/index.vue中: 

在父组件Search中我们要拿到仓库中的数据,我们得映射为组件实例身上的属性,利用mapState

 在computed计算属性中这样写:

state.search.searchList.total是从下图来的:这就是服务器仓库中的真实数据

 

我们会发现经过上面的操作后我们的组件Search中拿到了total

 所以total的数据我们就可以放到页面中,进行替换

 

3.子给父通信

分页器是在Search组件中的,分页器是子组件,Search是父组件,我们要实现点击分页器实现页面的更新变化,涉及到了子给父通信,那么就要利用到自定义事件

我们定义一个方法,让子组件把当前页通知给父亲,因为我们点击切换哪页,哪页就是当前页

 在methods中定义一个方法:

<