vue 多页面开发分页组件 有搜索功能

前言

需要具备父子组件通信的知识 不知道的可以看我的笔记了解--里面的第26、27条

• 多页面结构截图

image.png

• 效果 gif 图

Animation47.gif

正文

分页组件源码

1. 新建分页 .vue 文件 src -> components -> pagination -> index.vue，编辑 index.vue 文件

2. 父组件相应的使用示例，多余的源码已删除

• axios 挂载是在相应的 js 文件中

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.axios = axios

总结

刚开始觉得还是蛮简单的，后来发现最早时候写的 bug 很多

• 需要注意的地方(bug 产生的原因)：
  • 搜索后要将 "页码重置为 1"
  • "如果当前搜索成功之后，但是页码数量少于 页码列表总长度 ，比如两页，之后将搜索框内容手动删除，再点击分页会出现请求到的数据已更新为全部，但是分页列表数组 length 还是 2 导致的 bug"