vuejs2.0 implementiert die Methode zur Verwendung von $emit zur Ereignisüberwachung der Datenübertragung in Paging-Komponenten_Javascript-Fähigkeiten-js-Tutorial-php.cn

vuejs2.0 implementiert die Methode zur Verwendung von $emit zur Ereignisüberwachung der Datenübertragung in Paging-Komponenten_Javascript-Fähigkeiten

高洛峰

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

Original

1576 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von $emit für die Ereignisüberwachungsdatenübertragung in vuejs2.0 vorgestellt. Es ist sehr gut und hat Referenzwert 🎜> Der Artikel stellt das einfache Paging vor, das von vuejs implementiert wird. Wenn ich mehrere Seiten habe, die Paging-Effekte benötigen, ist es unmöglich, diesen Code für jede Seite zu kopieren. Dies bedeutet, ihn zu kapseln und in eine universelle Komponente umzuwandeln.

Verwenden Sie zunächst den grundlegenden Vue-Konstruktor, um eine „Unterklasse“ zu erstellen, Vue.extend( Optionen)

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;

Nach dem Login kopieren

Hier erstellt Eine globale pagenav kann woanders aufgerufen werden.

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Erstellen Sie eine neue Vue-Objektinstanz

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

Nach dem Login kopieren

Verwenden Sie einfach js, um die Paging-Komponente zu kapseln.

Erzielen Sie den Effekt














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

Nach dem Login kopieren

Das Obige ist das vom Herausgeber 0 eingeführte vuejs2 Implementiert die Paging-Komponente mithilfe von $emit für die Datenübertragung zur Ereignisüberwachung. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere vuejs2.0-Implementierungen von Paging-Komponenten mit $emit zur Ereignisüberwachung und Datenübertragung finden Sie auf der chinesischen PHP-Website!