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

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;

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>

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

Erstellen Sie eine neue Vue-Objektinstanz

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

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>

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!