Vue.js组件component关于分页功能、自定义事件的$.Emit()的使用

最近在学习Vue.js，需求需要做一个分页的组件。捣鼓了一下午终于搞定了。

先让我们看看官方的说明。

必须先注册组件（dataAll是全局变量），再进行使用。代码如下。以后可以直接作为表格的尾页进行使用。

dataAll全局变量中：

PS：pageNow是分页页数，currentPage是当前页，pageAll是总页数，itemAll是总条目数

var dataAll = {
    pageNow: 10,
    currentPage:0,
    pageAll: -1,
    itemAll:-1,
}

Vue.component('table-page', {
data:function(){
return {
pageSelect:[
{
  "id":"first",
  "name":"首页",
},{
  "id":"previous",
  "name":"上页",
},{
  "id":"next",
  "name":"下页",
},{
  "id":"last",
  "name":"尾页",
}]
}
},
props: ['inputInfo'],
  template: "<div><label style='float: left;font-weight: normal;'>当前页数 <font color='red'>{{dataAll.currentPage+1}}</font>/<font style='margin-right:30px' color='red'>{{dataAll.pageAll}} </font> 每页显示"
  +"<select v-model='dataAll.pageNow' v-on:change='pageNowChange(dataAll.pageNow)'><option>10</option><option>20</option><option>50</option></select> 总页数:<font color='red'>{{dataAll.itemAll}}</font ></label>"
  +"<ul style='margin: 0px;float: right;' class='pagination'>" 
  +"<label><div class='input-group'><input v-model='inputInfo' style='margin-left:30px;width: 80px;' type='text' class='form-control' placeholder='选择页数' aria-describedby='basic-addon2'><span class='input-group-btn'><button v-on:click='jumpPage' class='btn btn-primary' type='button'>跳转</button></span></div></label>"
  +"<li v-on:click='pageClick(pageSelect[0])'><a href='javascript:void(0)'>{{pageSelect[0].name}}</a></li>"
  +"<li v-on:click='pageClick(pageSelect[1])'><a href='javascript:void(0)'>{{pageSelect[1].name}}</a></li>"
  +"<li v-on:click='pageClick(pageSelect[2])'><a href='javascript:void(0)'>{{pageSelect[2].name}}</a></li>"
  +"<li v-on:click='pageClick(pageSelect[3])'><a href='javascript:void(0)'>{{pageSelect[3].name}}</a></li><ul></div>",
  methods:{
    pageClick:function(obj){
    switch(obj.id){
    case "first":
    dataAll.currentPage = 0;
    break;
    case "previous":
    if(dataAll.currentPage > 0){
    dataAll.currentPage --;
    }
    break;
    case "next":
    if(dataAll.currentPage < dataAll.pageAll-1){
    dataAll.currentPage ++;
    }
    break;
    case "last":
    dataAll.currentPage = dataAll.pageAll-1;
    break;
    };
    this.$emit("reload");
    },
    jumpPage:function(){
    var val = parseInt(this.inputInfo);
    if(val > 0 && val <=dataAll.pageAll){
      dataAll.currentPage = val-1;
    }else{
    alert("请输入正确的页面");
    }
    this.$emit("reload");
    },
    pageNowChange:function(i){
    dataAll.pageNow = i;
    dataAll.currentPage = 0;
    this.$emit("reload");
    }
  }
})

渲染后的效果如图：

上述代码有一些需要注意的地方：
1、pageClick是点击“首页”、“上页”等触发的方法，jumpPage是跳转方法，pageNowChange是改变每页显示所做的事。
2、先让我们看看官方的说明：


这是父子之间组件的通信过程。可以看我组件中每个方法最后都有一个$.Emit(“reload”)操作，这是为了组件的隔离性和复用性，为了组件的独立性，这里会有一个提交给父类（即在html中使用“table-page标签”）的reload，在父类接受了reload参数之后，见下图:


这是我在父类中自定义的事件，这个事件在提交了emit（reload）之后会触发search事件，这个事件在vue实例代码中实现。这大大提高了独立性。如果还不明白可以参考vue文档实例：点击打开链接
如下图所示：


接下来调取vue实例代码：

var page = new Vue({
  el: '#tableVue',
  data :{infoObj:info,
  tableData:[],
    dataAll},
  methods:{
  search:function(){
    this.tableData = [];
    this.init(dataAll.pageNow);
    console.log(this.tableData);
    },
    init:function(pageNow){
    var lengthAll = info.infomation.length;
    var lengthPage = parseInt(lengthAll/pageNow)+1;
    for(var i = dataAll.currentPage*pageNow; i < (dataAll.currentPage+1)*pageNow ;i++){
    if(info.infomation[i] == undefined){
  break;
  }else{
  this.tableData.push(info.infomation[i]);
  }
    }
  dataAll.pageAll = lengthPage;
  dataAll.itemAll = lengthAll;
    }
  },
  created:function(){
  this.init(dataAll.pageNow);
  }
})

可以看到这里首先created创建了表格同时更新数据（不明白生命周期的可以看这里： 点击打开链接），然后根据组件的方法进行数据视图更新，init方法是更新当前实例属性达到更新视图的功能。
完成后渲染如图：


可以发现各种功能都可以。
由于没有服务器数据这里用的是本地数据json。所以如果要ajax获取的话需要改代码。但是组件基本都可以去使用了。
html代码如下所示：

<table class="table">
<thead>
<tr style="color:white; background-color:#307ecc">
<th style="width: 5%"></th>
<th style="width: 15%">姓名</th>
<th style="width: 20%">地址</th>
<th style="width: 20%">邮箱地址</th>
<th style="width: 10%">年龄</th>
<th style="width: 13%">截止日期</th>
<th style="width: 16%"></th>
</tr>
</thead>
<tbody id="tableVue">
<tr v-for="detail in tableData">
<td><input type="checkbox"></td>
<td>{{detail.first_name}} {{detail.last_name}}</td>
<td>{{detail.id}}</td>
<td>{{detail.email}}</td>
<td>{{detail.age}}</td>
<td>{{detail.start_date}}</td>
<td>
<a id="tdEdit" href=""><i class="fa fa-w fa-edit"></i>编辑</a>
<a id="tdDelete" href=""><i class="fa fa-trash-o" aria-hidden="true"></i>删除</a></td>
</tr>
<tr id="item_list">
<td colspan="7">
<table-page v-on:reload="search"></table-page>
</td>
</tr>
</tbody>
</table>

源代码我会找个时间上传，这次主要为了纪录我自己的vue学习之路，方便以后自己需要用的时候回来查看。很多地方写的不够好，临时赶出来的希望谅解。