前言

在之前的文章中，vue已经被用来实现前端分页效果。在本文中，我们将分页分开来实现一个分页组件

先看实现效果图

代码实现

按照惯例，当我们通过冻结手来实现它时，我们应该首先考虑通过vue实现组件的想法

1.有必要预先设置哪些参数需要公开并传递给父组件

分页： name=' name ' @ change=' onPageChange ' : page-size=' size ' : total=' Total ' layout=' jumper，Total ' : current-page=' curpage '/方法和参数说明属性page-size每页显示的条目数总条目数current-page当前页码布局不显示jumper，默认为Total

事件

当前页面更改时触发的更改

2.另一个是所涉及的父组件和子组件之间的通信

这里参数主要通过道具传递给子组件

使用子组件中的发出自定义事件将数据返回到父组件

A.字符串数组形式的道具

prop :[' title '，' likes '，' ispublished '，' commentids '，' author']或指定每个道具的值类型

Props: { title : string，像s: number一样，是发布的： boolean，commentids 3360 array，author : object} B .道具验证

prop : {//基本类型检查(` null '匹配任何类型)propA: Number，//多个可能的类型prop :[String，Number]，//必需字符串propC: { type: String，Required: true }，//number propd:具有默认值{type: number，default3360 100}，//Object prop :具有默认值propE: { type: Object，//自定义验证函数propf : { validator : function(value){//此值必须与以下字符串之一匹配：return ['success '，' warning '，' dancer']。(值)的索引！==-1}}}使用道具将数据传递给子组件。子组件主要有三种形式接收父组件传递的参数道具字符串数组，指定每个道具值类型，验证道具。通常，我们使用道具验证。

经过分析，我们可以通过冷冻双手来实现

1.这里我们首先使用vue-cli创建一个vue项目

安装vue-cli

$npm安装-g vue-cli

创建vue项目

$vue init webpack my-project

项目运营

运行dev2，在组件文件下创建一个分页组件

模板' div class='分页clearfix' div class='页面大小fl' v-if='isShowTotal '共{ {总计}}条/div ul class=' page-list fl clear fix ' Li @ click='更改页面(当前页面-1)'上一页/Li Li : class=' { ' active ' :当前页面==item。val }“v-for=”页面列表”中的项目v-text=' item。text ' @ click='更改页面(项目。val)' 1/Li Li @ click='更改页面(当前页面1)'下一页/Li/ul div class=' page-jump fl ' v-if=' is show jumper '前往input class=' input ' type=' text ' v-model=' toPage ' @ keydown=' submit(toPage，$event)'页！-button @ click='更改页面(toPage)'确定/button-/div/div/模板脚本导出默认值{ name: 'Paging '，//prop 3360[//' name '//]，//prop验证props: { name:String，pageSize: { type: Number，default: 10 }，总计： { type: Number，默认值： 0 0 }，当前页面： { type : Number，默认值： 1 }，布局： { type: String }，数据(){ return { isshow jump 3360 false，跳转到x页pageGroup:10//可见分页数量默认10个分页数} }，创建d :函数(){控制台。日志('已创建')；这个。isshow total=this。布局。indexof(' total ')！==-1;这个。isshowjumper=this。布局。索引of('跳线')！==-1;}，挂载ed :函数(){控制台。日志(' mount '，这个。布局)；}，计算出： { total page : function(){ return math。天花板(这个。总计/本。页面大小)}，页面列表： function(){ var list=[]；var计数=数学。地板(这个。页面组/2)，中心=this.currentPagevar左=1，右=this.totalPageif(this。总计页面。页面组){ if(this。当前页数1){ if(this。当前页面。totalpage-count){ left=this。当前页数；右=这个。当前页数-1；} else { left=this。总页数-这个。页面组1；} } else { right=this。page GrouP} } //遍历添加到数组里while(左=右){ list。push({ text : left，val : left })；向左；}返回列表；} }，methods:{ //回车事件submit(toPage，e){ //console.log('e.keyCode '，toPage，e.keyCode) //key .代码===13表示回车键if(e.keyCode===13){ //逻辑处理这个。更改页面(ToPage)；} }，ChangePage : FuncTion(idx){ if(idx！=这个。CurrentPage idx 0 idx=this。TotalPage){//触发父组件事件页面更改会转换成小写页面改变这个$emit('change '，{ cur page : number(idx)})；} } }}/script！-添加"作用域"属性，将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件-样式作用域* { padd : 0；保证金： 0；}.fl{ float:左侧；} .clearfix:after在{显示：块之后；内容： " "；clear:两者；}.页面大小{ height: 26px线高： 26px}.页面列表{}。页面跳转{ height: 26px线高： 26px左边距left: 20px}。翻页。输入{ width : 32 xpadding : 4px 2px border-radius : 2px；border: 1px实心# dcdfe 6 margin : 0 4px } ul { list-style : none；} ul li{左侧浮动：颜色： # 606266背景： # F4 F4 F5；padding: 2px 8pxcursor:指针；边界半径： 2pxmargin: 0 5px} ulli。活动{后台： # 409 effcolor: # fff}/style3，在父组件中引入并使用组件

模板div！-分页组件-分页： name=' name ' @ change=' on page change ' : page-size=' size ' : total=' total ' layout=' jumper，total ' : current-page=' curl '/div/template！-分页属性页面大小-每页显示的条目数当前页面的条目总数当前页面布局默认情况下不显示跳线，并且跳线，totalPaging事件在当前页面更改时触发-脚本从“@/components/paging”导入分页；导出默认{name :' index '、components : {paging}、data () {return {msg:' hello '、name :' Ajian a '、size:10、total:201、curPage:1 } }、methods : { onpagechange : function(page){ this . curpage=page . curpage；} } }/脚本遇到的问题

1.在子组件中修改当前页面时报告错误

避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖

使用组件时，传入的道具被组件再次修改

避免直接修改prop，因为当父组件重新呈现时，该值将被覆盖。

changepage : function(idx){ if(idx！=this . CurrentPage idx 0 idx=this . TotalPage){ this . CurrentPage=idx；//触发父组件事件pageChange将被转换为小写pagechange this。$ emit(' change ')；}}求解

修改代码，通过emit将curPage传递给父组件，并让父组件修改它

changepage : function(idx){ if(idx！=这个。currentpageidx0idx=this。total page){//触发父组件事件pageChange将被转换为小写pagechangethis。$ emit ('change '，{ curpage : idx })；}}父组件侦听事件更新curPage

onpagechange : function(page){ this . cur page=page . cur page；}最后，

以上就是分页组件的整个实现过程。事实上，只要我们知道父组件和子组件如何传递参数，以及在实现组件时需要向父组件公开哪些参数，整个实现过程并不难

摘要

以上是边肖介绍的基于vue2.0模仿百度实现前端分页效果的实现代码附后，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！