Vue.js实现了一个自定义分页组件vue-paginaiton

Vue实现了一个分页组件vue-paginaiton

用了一段时间vue，感觉不想再直接操作DOM了。数据绑定编程体验真的很好。分页组件的实现。

这里的css没有发布，所以你可以直接从github: vue-pagination下载

让我们先举一个地图的例子

模版

div class=' page-bar ' ul Li v-if=' showfirst text ' a v-on:单击=' cur-'上一页/a/li li v-for='页码中的索引' a v-on :单击='页面更改(索引){ { index } }/a/Li Li v-if=' shownext text ' a v-on:单击=' cur '下一页/a/Li lia of I { { all } }/I pages/a/Li/ul/div

在引入js之前，页面的显示和分析可以简单直接的输出，而{{index}}是一个页码，需要一定的动态渲染。

var app=new Vue({ el: '#app '，data:{ currentpage: 1，totlepage: 28，visiblepage:10，msg: '' }，})调用new Vue({ parameter})会创建一个基本组件，将其分配给变量app.el是元素的缩写，并定位模板的位置。数据就是数据。知道总页数，显示页码还是需要一些计算的，所以显示页码是一个计算属性。所以我们使用计算

computed : {//computed属性：返回页码数组，其中脏检查将在不使用$watch()的情况下自动执行；Pagenums:函数(){ //初始化前后页面边界var LowPage=1；var high page=this . totle page；var page arr=[]；如果(这个。完全正确。visible page){//当总页数超过可见页数时，进行进一步处理；var subVisiblePage=math . ceil(this . visiblepage/2)；如果(这个。当前页面子可视页面此。currentPageThis。totlepage-subvisiblepage 1){//处理正常分页lowPage=this。当前页面-子可视页面；high page=this . current page subvisible page-1；} else if(这个。current page=subvisible page){//用于处理上一页的logic LowPage=1；high page=this . visible page；}else{//logic lowpage=this。准备好-这个。最后几页的visiblepage1high page=this . totle page；} }//确定上下页边界后，准备在(低页=高页){pagearr时将其压入数组。推送(低页)；lowPage}返回pageArr}}，观看html模板并找到v-if指令。显然，当内容为真时，就会输出，但如果不是，就不会输出。

专注于此

Li v-for=' pagenums中的索引' v-bind : class=' { active : current page==index } ' a v-: click=' page change(index)' { { index } }/a/Liv-for是循环呈现输出的计算属性page nums。每个循环的子元素被分配给索引v-bind:class绑定类。当渲染到当前角标记时，添加一个on:click类将绑定到该事件。我传入索引作为参数，然后进行判断，然后默认传递事件event。然后我们在Vue选项中添加方法字段。

methods:{ pageChange:函数(page){ if (this.currentpage！=page){ this . current page=page；这个。$dispatch('page-change '，page)；//父子组件之间的通信：==子组件通过$ diapatch()分发事件，父组件气泡通过v-: page-change监听对应的事件；};}}组件交互

组件写好后，问题来了。当用户点击页面进行更改时，如何通知其他组件进行相应的更改？您可以在该函数下插入一条语句，在该函数中，页面角会发生变化，以通知其他组件。但是，这种方法很差。可以使用

Watch: {currentpage:函数(旧值，新值){console。log (arguments)}}观察当前页面数据，当它发生变化时，可以得到前后的值。然后通知其他组件。

完整的代码可以在github:vue-pagination中看到

本文已整理成《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请点击专题vue.js组件学习教程学习。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。