众所周知，目前中国的web前端领域使用者最多，口碑最好的框架当属Vue，本胖相信到2018年，vue将全面统治web前端框架界，就像06年出来的jquery一样，毕竟任何都是分久必合，合久必分，框架也是如此。（以上是本胖个人观点）
我们可以回想一下，jquery流行的时候，大家做的最多的事应该就是写jquery插件吧，比如轮播，放大镜，分页，toast这些插件，虽然网上都有，但是还是自己写还有那么一点成就感，看到懂和写的好完全不是一回事哈，这里有一些原生js写的插件，欢迎浏览以及使用哈
吕胖胖的插件库地址
吕胖胖的插件库地址
那么如今进入了MVVM时代，组件就慢慢取代了插件，就拿vue来说有2大核心—数据驱动+组件。不知道大家有没有共鸣哈，很久之前本胖在写插件的时候，比如写一个轮播插件，那么必不可少除了js代码外还会有一些配套的html以及css，每次用到时候就要都拷贝过去，会感觉用起来没有整体性，所以组件就很好地帮我们解决了这个痛点，尤其是vue的组件形式，把html+css+js都放在一个vue文件（更重要的一点是3者可以做到互相不混合，本胖讨厌在js里面写html+css），使用的时候整体一个import就可以了。好了，说了这么多写这篇文章的初衷，下面就通过2个组件的编写形式来熟悉vue组件的开发流程（本胖的写法一定不是最好的，欢迎大家提建议，这里先谢谢了哈）。
1.PC分页组件
可以看到，这个组件需要实现下面这些功能（这是从开发的角度来看，就是一开始这个组件并没有存在）：
1.初始化显示的时候可以直接显示用户想第一页就看到的某页（然后这种需求很少）。
2.点击左右的翻页按钮可以让组件内部的页码向前或者向后跳转一页（在可以跳转的访问内），并且父组件能知道当前是第几页。
3.点击显示出来的具体页码时候可以让组件内部的页码跳转到目标页码，并且父组件能知道当前是第几页。
4.输入具体页码的时候可以让组件内部的页码跳转到目标页码（在可以跳转的访问内），并且父组件能知道当前是第几页。
从上面的分享我们可以看出，其实这个分页组件就是干了一件事，用户在组件内部操作页码的时候把当前页码传递给父组件。那么我们要做的就是分3部编写html->css->js。限于篇幅原因，这里只讲js的编写，全部源码可以去吕胖胖的vue组件库地址
props接口的暴露
A.pageIndex 当前页面数（可选，默认第一页）
B.pageTotal 总页码数（必须）
C. 最多显示页码数（可选，默认10）
event接口暴露
A.页码改变的时候父组件暴露的事件（上面我们的分析是3个地方都可以让页码改变，但是都可以放一处控制）
由于简书显示不了代码，所以下面所有代码本胖都用图片，这样能更加直观哈。
根据props接口的暴露的分析，我们就可以很自然地写出组件的props
写好props后要做的事情就是写组件内部的data对象。
注意，因为pageIndex是由父组件传进来的，我们又要在组件里面改变pageIndex的值，所以必须要在组件的data里面重新定义一个变量。
写好了data对象，接下来的事情就是写一些方法，因为组件内部的状态改变必须要通过事件才能传递给父组件，下面就是这个组件的核心方法，其他的一些方法都是在不同时期调用该方法。
上面的方法的作用就是显示页码，也就是渲染组件，这段代码一开始做了一个判断，如果当前pageIndex在头，则显示1-最多显示页码数，在尾，则显示（pageTotal-最多显示页码数）-pageTotal，否则则在pageIndex往前后各取最多显示页码数的一半，其实就是让pageIndex尽量显示在中间（PC端分页不都是这样的哈哈）。不过要注意一点，就是一开始要做一个判断，如下图，当pageTotal小于或者等于最多显示页面，要做一个处理。
然后就是显示页码了，将获取到的页码都push进showPageArr里面，在html里面会遍历这个数组哈。接下来的代码就是做一个优化判断，比如最左边初始page是5，那么就在他前面显示...表示前面还有页码，最右边也是一样。该函数的最后一句就是告诉父组件，我的pageIndex发生改变了，你怎么处理我不管，反正我已经向你报告了。本胖这里用的是2.20+的sync，使用的时候注意版本就行。
好了，核心函数写好了，接下来就是写一个事件函数，比如直接点击页码，点击前一个，点击后一个。这就不一一说明了。
2.地址选择器组件
可以看到，这个组件需要实现下面这些功能（这是从开发的角度来看，就是一开始这个组件并没有存在）：
1.初始化的时候可以显示用户已经选择的地址（如果有）。
2.选择省的时候要将市，区切换成相应的，并且要让父组件知道当前组件里面的地址。
3.选择市的时候要将区切换成相应的，并且要让父组件知道当前组件里面的地址。
4.选择区的时候，并且要让父组件知道当前组件里面的地址。
从上面的分享我们可以看出，其实这个地址选择组件就是干了一件事，用户在组件内部选择地址的时候把当前用户选择的地址传递给父组件。那么我们要做的就是分3部编写html->css->js。限于篇幅原因，这里只讲js的编写，全部源码可以去吕胖胖的vue组件库地址
props接口的暴露
A.defaultPro 初始化省（可选，默认北京市）
B.defaultCity 初始化市（可选，默认北京市）
C.defaultArea 初始化区（可选，默认东城区）
event接口暴露
A.地址改变的时候父组件暴露的事件（上面我们的分析是3个地方都可以让地址改变，但是都可以放一处控制）
由于简书显示不了代码，所以下面所有代码本胖都用图片，这样能更加直观哈。
根据props接口的暴露的分析，我们就可以很自然地写出组件的props
写好props后要做的事情就是写组件内部的data对象。
注意，本胖这里的地址是有一个address.js，里面会输出一个provinceList对象代表全部的地址信息。
写好了data对象，接下来的事情就是写一些方法，因为组件内部的状态改变必须要通过事件才能传递给父组件，下面就是这个组件的核心方法，其他的一些方法都是在不同时期调用该方法。
上面的方法的作用就是地址改变时候显示相应地址的，也就是渲染组件，这段代码一开始是填充省数据，因为不管用户选择的是什么省，比如浙江还是北京，省数据里面都是那30多个。然后就是获取市数据，要根据当前省的信息，比如浙江省就获取浙江省下面的市，这里做了一个判断，如果是直辖市就获取直辖市。接着根据当前市信息来获取区数据，这里也做了一个是否是直辖市的判断（多了2个直辖市的判断是因为本胖的数据结构，其实也可以在数据结构层面解决这个问题）。最后在$nextTick回调里面的就是将获取到的省市区数据分别填充，并且显示用户选择的相应地址。注意一下，这里通知父组件的地方在这里
emitAdress函数里面只是做了一个this.$emit()提交。
总结
这是本胖写的最长的一次博客，希望能让大家有所收获哈。
欢迎来到吕胖胖的github，喜欢就给颗star哈，先谢谢了。
