前言

上篇文章中，已经使用vue实现前端分页效果，这篇文章我们单独将分页抽离出来实现一个分页组件

先看实现效果图

代码实现

按照惯例，我们在冻手实现的时候还是先想一想vue实现组件的思路

1、需要提前设定哪些参数需要暴露出来给父组件传递

<Paging        :name="name"       @change="onPageChange"       :page-size="size"       :total="total"       layout="jumper,total"       :current-page="curPage"     />   方法及参数说明 属性  page-size 每页显示条目个数 total 总条目数 current-page 当前页数 layout 布局 默认不显示 jumper,total  事件 change 当前页改变时触发

2、再一个就是涉及到的父子组件通信

这里主要通过props向子组件传递参数
在子组件中使用emit自定义事件返回数据给父组件

a.字符串数组形式props

props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 或者指定每个prop的值类型 props: {   title: String,   likes: Number,   isPublished: Boolean,   commentIds: Array,   author: Object }

b.props验证

props: {     // 基础的类型检查 (`null` 匹配任何类型)     propA: Number,     // 多个可能的类型     propB: [String, Number],     // 必填的字符串     propC: {       type: String,       required: true     },     // 带有默认值的数字     propD: {       type: Number,       default: 100     },     // 带有默认值的对象     propE: {       type: Object,       // 对象或数组默认值必须从一个工厂函数获取       default: function () {         return { message: 'hello' }       }     },     // 自定义验证函数     propF: {       validator: function (value) {         // 这个值必须匹配下列字符串中的一个         return ['success', 'warning', 'danger'].indexOf(value) !== -1       }     }   }

使用props传递数据给子组件 ，子组件主要有三种形式来接收到父组件传递过来的参数
props字符串数组、指定每个prop值类型以及props验证，通常我们会使用props验证

分析完之后，接下来我们可以冻手实现了

1、这里我们用vue-cli先创建一个vue项目

安装vue-cli $npm install -g vue-cli  创建vue项目 $vue init webpack my-project  项目运行 $cd my-project $npm run dev

2、在components文件下创建一个Paging组件

<template>   <div class="paging clearfix">      <div class="page-size fl" v-if="isShowTotal">共{{total}}条</div>        <ul class="page-list fl clearfix">             
                        
关键字：