上一篇文章介绍了vuejs实现的简单分页，如果我有几个页面都需要有分页效果，不可能每个页面都去复制一下这段代码吧，意思是封装一下，变成通用的组件。

首先使用基础某视频剪辑软件构造器，创建一个"子类“，Vue.extend(选项)

var BAr HTMl=' div class=' page-BAr ' ' ' ul ' ' Li v-if=' cur 1 ' a v-: click=' cur-，pageClick()'上一页/a/Li ' ' Li v-if=' cur==1 ' a class=' ban click '上一页/a/Li ' ' Li v-for=' indexes ' v-bind : class=' { active : cur==index } ' ' a v-: click=' BTN click(index)' { { index } }/a ' '/Li ' ' Li v-if=' cur！=all ' a v-: click=' cur，pageClick()'下一页/a/Li ' ' Li v-if=' cur==all ' a class=' ban click '下一页/a/li' 'lia共我{{all}}/i页/a/Li ' '/ul ' '/div '；var导航条=Vue。extend({ template : bar html，props:['all '，' cur']，computed : { indexs 3360 function(){ var left=1；var right=this . all var ar=[]；如果(这个。all=5){ if(this。弯曲这个。弯曲这个。all-2){ left=this。cur-2 right=这个。cur 2 } else { if(this。cur=3){ left=1 right=5 } else { right=this。all-4 } } while(左=右){ ar。push(left)left { return ar } }，methods : { BTN click 3360 function(data){ if(data！=这个。{这个。cur=数据；这个$emit('btn-click '，数据);} }，页面点击：函数(){这个.$emit('btn-click '，这个。cur)；} }, });window.pagenav=navBar这儿创建了一个全局的页面导航，可以在其它地方都可以调用。

超文本标记语言代码

div id=' page ' vue-nav : cur。sync=' cur ' : all。sync=' all ' v-: BTN-click=' listenDate '/vue-nav p style=' margin-left :40 px；'{{msg}}/p/divcss代码。页面栏{ margin:40px}ul，Li { margin : 0pxpadding : 0px } Li { list-style : none } .隐藏页面栏ul { overflow:}。页面栏li{左侧浮动：}.页面栏李：第一个孩子a {左边距： 0px } .页面栏{ display:块；border: 1px固体# ddd文本装饰：无；相对位置：padding: 6px 12px左边距：-1px；线高： 1.42857143;color: # 337ab7cursor:指针}。页面栏：悬停{背景色： # eee}.页面栏a .禁止点击{光标：否-不允许；}.页面栏。激活a { color: # fffcursor:默认值；背景-颜色： # 337 ab 7；边框颜色： # 337 ab 7；}.页面栏I { font-style : normal；color : # d 44950 margin 3360 0px 4px font-size : 12px；}新建一个某视频剪辑软件对象实例

var PageBar=new Vue({ El : ' # page '，data: { all: 8，//总页数cur: 1，//当前页码msg:'' }，组件：{ 'vue-nav':pagenav }，watch: { cur:函数(旧值，新值){ console.log('监听坏蛋前与后的值：');console.log(参数);} }，方法： { listendate :函数(数据){ this。cur=数据；this.msg='你点击了数据页；} } })简单的用射流研究…封装了一下分页组件。

实现效果

！DOCTYPE html html html hearteta name=' viewport ' content=' width=device-width，initial-scale=1.0，mini-scale=1.0，maximum-scale=1.0，user-scalable=no '/meta charset=' utf-8 ' title/title meta name=' keywords ' content=' '/meta name=' description ' content=' '/script type=' text/JavaScript ' src=' http 3360 js/vue。最小2。js '/脚本样式。页面栏ul，Li { margin : 0pxpadding : 0px } Li { list-style : none } .隐藏页面栏ul { overflow:}。页面栏li{左侧浮动：}.页面栏李：第一个孩子a {左边距： 0px } .页面栏{ display:块；border: 1px固体# ddd文本装饰：无；相对位置：padding: 6px 12px左边距：-1px；线高： 1.42857143;color: # 337ab7cursor:指针}。页面栏：悬停{背景色： # eee}.页面栏a .禁止点击{光标：否-不允许；}.页面栏。激活a { color: # fffcursor:默认值；背景-颜色： # 337 ab 7；边框颜色： # 337 ab 7；}.页面栏I { font-style : normal；color : # d 44950 margin 3360 0px 4px font-size : 12px；}/style/head dydiv id=' page ' vue-nav : cur。sync=' cur ' : all。sync=' all ' v-: BTN-click=' listenDate '/vue-nav p style=' margin-left :40 px；'{ { msg } }/p/div脚本类型=' text/JAVAScript ' var barHTMl=' div class=' page-bar ' ' ' ul ' ' Li v-if=' cur 1 ' a v-: click=' cur-，pageClick()'上一页/a/Li ' ' Li v-if=' cur==1 ' a class=' ban click '上一页/a/Li ' ' Li v-for=' indexes ' v-bind : class=' { active : cur==index } ' a v-: click=' BTN click(index)' { { index } }/a ' '/Li ' ' Li v-if=' cur！=all ' a v-: click=' cur，pageClick()'下一页/a/Li ' ' Li v-if=' cur==all ' a class=' ban click '下一页/a/li' 'lia共我{{all}}/i页/a/Li ' '/ul ' '/div '；var导航条=Vue。extend({ template : bar html，props:['all '，' cur']，computed : { indexs 3360 function(){ var left=1；var right=this . all var ar=[]；如果(这个。all=5){ if(this。弯曲这个。弯曲这个。all-2){ left=this。cur-2 right=这个。cur 2 } else { if(this。cur=3){ left=1 right=5 } else { right=this。all-4 } } while(左=右){ ar。push(left)left { return ar } }，methods : { BTN click 3360 function(data){ if(data！=这个。{这个。cur=数据；这个$emit('btn-click '，数据);} }，页面点击：函数(){这个.$emit('btn-click '，这个。cur)；} }, });window . page nav=NavBarvar PageBar=new Vue({ El : ' # page '，data: { all: 8，//总页数cur: 1，//当前页码msg:'' }，组件：{ 'vue-nav':pagenav }，watch: { cur:函数(旧值，新值){ console.log('监听坏蛋前与后的值：');console.log(参数);} }，方法： { listendate :函数(数据){ this。cur=数据；this.msg='你点击了数据页；} } })/脚本/正文/html以上所述是小编给大家介绍的vuejs2.0实现分页组件使用$emit进行事件监听数据传递，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！