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学习之路，方便以后自己需要用的时候回来查看。很多地方写的不够好，临时赶出来的希望谅解。