你了解vue的组件吗？你有没有实现过组件？

上次讲解了vue组件的实现过程。具体可以看这篇文章：点击访问今天用vue实现一个分页组件。总体来说vue的实现比较简单，样式部分模仿elementUI。所有代码的源码都可以在github上下载：先看下载地址：点击查看运行效果：网上地址的整体思路，我们先看下所用文件的目录：我们在pageComponentsTest.vue页面引入了pageComponent.vue分页组件。整体思路是通过props实现组件灵活通用的效果，整体语法是使用vue的VM语法。pageComponent.vue实现首先实现了一个分页，需要知道数据项总数，一个页面显示的数据项个数，当前显示的数据页。然后我们在pageComponent.vue中有道具。看下面代码：props:{//分页配置pageConfig:{type:Object,require:true,default(){return{pageSize:10,//一个页面的数据项数pageNo:0,//当前页面Indextotal:0,//数据项总数pageTotal:0//总页数}}}根据用户输入的参数，我们可以使用computed属性来计算总页数的一个变量：computed:{//计算总页数，如果传pageTotal，直接取pageTotal的值，如果传total，则根据pageSize()计算pageTotal{constconfig=this.pageConfigif(config.pageTotal){returnconfig.pageTotal}else{if(config.pageSize&&config.total){returnMath.ceil(config.total/config.pageSize)}else{return0}}}}加上总页数和当前页数，实现我们的html部分需要各种判断，这里有4种情况：总页数小于8，直接遍历到8就可以了。Thetotalnumberisgreaterthan8,butthecurrentpagelessthan4.总页数大于8，当前页在末尾。总页数大于8，当前页在中间。下面看具体的现实：上一页{{i}}{{i}}···{{pageTotal}}pageTotal-4">1···{{i+(pageTotal-6)}}1···{{currentPage-2}}{{当前页面-1}}{{currentPage}}{{currentPage+1}}{{currentPage+2}}···{{pageTotal}}下一页可以看到页面需要实现3个方法，分别是上下页面，点击页面方法：{prePage(){this.currentPage-=1this.$emit('changeCurrentPage',this.currentPage)},nextPage(){this.currentPage+=1this.$emit('changeCurrentPage',this.currentPage)},changeCurrentPage(i){this.currentPage=ithis.$emit('changeCurrentPage',this.currentPage)}}以上是pageComponent。Vue大致实现了。每次页面发生变化时，都会触发changeCurrentPage方法的回调，通知当前使用该组件的页面当前页面发生了变化。pageComponentsTest.vue的实现比较简单，只要传入组件需要的相应参数，就可以展示我们的组件。参考部分：入口部分：{name:"pageComponentsTest",data(){return{pageConfigTotal:{total:21,pageSize:10,pageNo:1},pageConfigPageTotal:{total:21,pageSize:10,pageNo:1,pageTotal:50}}},组件:{'page-component':pageComponent},方法:{changePage(page){this.pageConfigTotal.pageNo=page}}}综上所述，我们可以看到，整体使用vue实现分页组件是非常容易的，比使用jQuery方便多了。使用vm模式开发前端最明显的优势就是数据模式部分和视图页面部分可以保持同步。开发者不用考虑这个过程，所以整体上要简单的多。在线体验地址所有源码都在我的仓库地址：下载个人博客：访问公众号：学习如逆水行舟，不进则退。前端技术发展迅速。我会陪着你，每天坚持推送博文，和你一起进步。希望大家关注我，尽快收到最新文章。