vuejs2.0 implémente la méthode d'utilisation de $emit pour le transfert de données de surveillance des événements dans les compétences de pagination des composants

vuejs2.0 implémente la méthode d'utilisation de $emit pour le transfert de données de surveillance des événements dans les compétences de pagination des composants_javascript

高洛峰

Libérer： 2017-02-24 17:20:30

original

1576 Les gens l'ont consulté

Cet article présente principalement la méthode d'utilisation de $emit pour la transmission des données de surveillance des événements dans vuejs2.0 afin d'implémenter les composants de pagination. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent se référer à l'article précédent

<.> L'article présente la pagination simple implémentée par vuejs. Si j'ai plusieurs pages qui nécessitent des effets de pagination, il est impossible de copier ce code pour chaque page. Cela signifie l'encapsuler et le transformer en un composant universel.

Utilisez d'abord le constructeur de base de Vue pour créer une "sous-classe", 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;

Copier après la connexion

Créé ici Un global pagenav peut être appelé ailleurs.

code html

<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>

Copier après la connexion

code css

.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;
}

Copier après la connexion

Créez une nouvelle instance d'objet vue

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;;
  }
 }
 })

Copier après la connexion

Utilisez simplement js pour encapsuler le composant de pagination.

Obtenir l'effet














<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>

Copier après la connexion

Ce qui précède est la vuejs2 introduite par l'éditeur 0. implémente le composant de pagination en utilisant $emit pour la transmission des données de surveillance des événements. J'espère que cela sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'implémentations vuejs2.0 des composants de pagination utilisant $emit pour la surveillance des événements et le transfert de données, veuillez faire attention au site Web PHP chinois !