vuejs2.0 implements the method of using $emit for event monitoring data transfer in paging components

vuejs2.0 implements the method of using $emit for event monitoring data transfer in paging components_javascript skills

高洛峰

Release： 2017-02-24 17:20:30

Original

1575 people have browsed it

This article mainly introduces the method of using $emit for event monitoring data transmission in vuejs2.0 to implement paging components. It is very good and has reference value. Friends who need it can refer to the next one.

Previous article The article introduces simple paging implemented by vuejs. If I have several pages that need paging effects, it is impossible to copy this code for every page. It means encapsulating it and turning it into a universal component.

First use the basic Vue constructor to create a "subclass", Vue.extend( options )

var barHtml = &#39;<p class="page-bar">&#39;+
   &#39;<ul>&#39;+
   &#39;<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>&#39;+
   &#39;<li v-if="cur==1"><a class="banclick">上一页</a></li>&#39;+
   &#39;<li v-for="index in indexs" v-bind:class="{ active: cur == index}">&#39;+
    &#39;<a v-on:click="btnclick(index)">{{ index }}</a>&#39;+
   &#39;</li>&#39;+
   &#39;<li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>&#39;+
   &#39;<li v-if="cur == all"><a class="banclick">下一页</a></li>&#39;+
   &#39;<li><a>共<i>{{all}}</i>页</a></li>&#39;+
   &#39;</ul>&#39;+
  &#39;</p>&#39;;
 var navBar = Vue.extend({
 template:barHtml,
 props:[&#39;all&#39;,&#39;cur&#39;],
 computed: {
  indexs: function(){
  var left = 1;
  var right = this.all;
  var ar = [];
  if(this.all>= 5){
  if(this.cur > 3 && this.cur < this.all-2){
   left = this.cur - 2
   right = this.cur + 2
  }else{
   if(this.cur<=3){
   left = 1
   right = 5
   }else{
   right = this.all
   left = this.all -4
   }
  }
  }
  while (left <= right){
  ar.push(left)
  left ++
  }
  return ar
  } 
 },
 methods: {
  btnclick: function(data){
  if(data != this.cur){
   this.cur = data;
   this.$emit(&#39;btn-click&#39;,data); 
  }
  },
  pageClick: function(){
  this.$emit(&#39;btn-click&#39;,this.cur);
  }
 }, 
 });
 window.pagenav = navBar;

Copy after login

A global is created here pagenav can be called from anywhere else.

html code

<p id="page">
 <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav>
 <p style="margin-left:40px;">{{msg}}</p>
</p>

Copy after login

css code

.page-bar{
 margin:40px;
}
ul,li{
 margin: 0px;
 padding: 0px;
}
li{
 list-style: none
}
.page-bar ul{
 overflow: hidden;
}
.page-bar li{
 float: left;
}
.page-bar li:first-child>a {
 margin-left: 0px
}
.page-bar a{
 display: block;
 border: 1px solid #ddd;
 text-decoration: none;
 position: relative;
 padding: 6px 12px;
 margin-left: -1px;
 line-height: 1.42857143;
 color: #337ab7;
 cursor: pointer
}
.page-bar a:hover{
 background-color: #eee;
}
.page-bar a.banclick{
 cursor:not-allowed;
}
.page-bar .active a{
 color: #fff;
 cursor: default;
 background-color: #337ab7;
 border-color: #337ab7;
}
.page-bar i{
 font-style:normal;
 color: #d44950;
 margin: 0px 4px;
 font-size: 12px;
}

Copy after login

Create a new one vue object instance

var pageBar = new Vue({
 el: &#39;#page&#39;,
 data: {
  all: 8, //总页数
  cur: 1,//当前页码
  msg:&#39;&#39;
 },
 components:{
  &#39;vue-nav&#39;:pagenav
 },
 watch: {
  cur: function(oldValue , newValue){
  console.log(&#39;监听cur前与后的值：&#39;);
  console.log(arguments);
  }
 }, 
 methods:{
  listenDate:function(data){
  this.cur = data;
  this.msg = &#39;你点击了&#39;+data+ &#39;页&#39;;
  }
 }
 })

Copy after login

Simply use js to encapsulate the paging component.

Implementation effect














<p id="page">
 <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav>
 <p style="margin-left:40px;">{{msg}}</p>
</p>

Copy after login

The above is the vuejs2.0 implementation introduced by the editor The paging component uses $emit for event monitoring data transmission. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more vuejs2.0 implementation of paging components using $emit for event monitoring and data transfer, please pay attention to the PHP Chinese website!