实现缘由
最近学习vue，在做一个练手项目，其中有两个页面都用到了分页组件，但为了能够在第二个组件中使用，对分页组件改了又改，但最终仍然不能够满足这两个页面的使用需求，最终发现了一个问题：组件的设计思想是实现复用，减少重复性的工作。那么明显vue学习之路应该大致有两步：
-
step1: 使用vue实现页面业务逻辑
-
step2: 对组件进行进一步抽象，使得组件能够复用
看来自己算是一直在step1中奋战，现在偶然发现了step2的需求，那么当然想要完成这次挑战了。冥冥中感觉这种可复用的组件应该是遵循某种“规范”的，这样才能保证其通用性，但是组件该怎么写自己是毫无头绪的，突然想到既然自己没思路，不如借鉴下其他的框架吧，于是选定了element框架，参考其分页组件
找寻某种“神秘”规范
相关链接：element_pagination
规范一：父组件传值，而非自己获取
<div class="block">
<span class="demonstration">大于 7 页时的效果</span>
<el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
从以上的调用方式我可以得出：分页组件需要的一些值，比如页数、当前页等等值都是从父组件传递的，而不是自己获取的。自己获取的话一般要通过路由来确定，这显然增加了耦合性
规范二：组件事件需传递到父组件中进行处理
- 完成组件自身的切换（比如点击第5页，需要给第5页增加类似一个‘active’类）
- 完成业务逻辑的实现（通过将此事件传递给父组件，由父组件完成请求某个页面数据的逻辑）
第一步负责组件页面的切换，第二部让父组件完成业务逻辑，保证了子组件不会涉及到具体的业务，因此复用性大大提高了。
动手实现
确定实现效果
我自己是想要实现element中页数大于7页时的分页效果的，效果如图所示
- 首页、尾页一直被显示
- 两边的省略号不一定显示
- 最边上的两个按钮负责向前或者前后一页
- 除了首页、尾页外，还会显示5个页码
确定向子组件传递的参数
可以看到element中是可以传递很多参数的，甚至背景都可以传递，这里我自己偷个懒，结合我自己练手的项目，确定值传递两个值：总页数(totalPage)和当前页(currentPage)
确定子组件向父组件传递的事件
可看到element中是有两个事件：页面内显示条数的改变和当前页的改变，这里我只需要当前页改变时触发事件(current-change)就好了
处理一个小问题
以上的页面逻辑是当总页数大于等于7页时的，如果总页数小于7是不行的，我这里直接采取个笨方法，如果总页数小于7页，那么我就有多少页，显示多少页
代码
自己将实现的代码尝试着发了一个npm包，大家可以直接使用
当然，因为此组件只实现了基本的功能，所以大家可以直接对分页组件的样式等等下载直接修改
