本文共 2214 字，大约阅读时间需要 7 分钟。

         额，先上代码吧！

       这里主要用到了组件之间的传参以及计算属性的特性

子组件：

• 模板

• 父传子

// props的接收方式有很多，不仅仅是通过数组的方式进行接收，props: {// 定义数据类型，以及初始值    total: { // 总条数      type: Number,      required: true,    },    pagesize: { // 每页几条      type: Number,      default: 1,    },    pagenum: { // 当前页      type: Number,      default: 1,    },

• computed中  

/*  依赖于计算属性的特性，只要当属性值发生变化，就会执行操作*/ computed: {/*  this.pagesize 在父子组件不断传值进行操作中,对于传过来的值要通过声明变量接收后才能使用，否则的话则会报错，这是因为遵循了单项数据流的原理。*/    pageData() {      let pageList = [];      let size = this.pagesize;      if (size <= 0) {        size = 1;      }      /*         Math.ceil()：向上取整，主要考虑到当页面数据不足时，如果向下取整，则会对数据的渲染影响      */      let pageData = Math.ceil(this.total / size);      for (let i = 1; i <= pageData; i++) {        pageList.push(i);      }      return pageList;    },  },

• 向父组件进行派发事件

pageChangeNum(item) {      // 当前页。      this.$emit("pageChangeNum", item);    },    pageChangeSize(e) {      // 每页显示的条数      let pagesize = Number(e.target.value);      this.$emit("pageChangeSize", pagesize);    },

父组件

•    在父组件中进行一个数据的传输，以及对子组件方法的接收

•   在父组件中对方法的操作

pageChangeNum(pagenum) {      // 当前页      console.log(pagenum);      this.queryInfo.pagenum = pagenum;    }, pageChangeSize(pagesize) {      this.queryInfo.pagesize = pagesize;    },

• 在computed中

searchList() {      var resList = this.list; // this.list==>原始数据      this.total = resList.length;      // 分页      /*        思考？            为什么要进行截取？       */          let start = (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize;      resList = resList.slice(start, start + this.queryInfo.pagesize);      return resList;    },

    分页数据显示时，当数据有10条时,每页显示3条，则必定有一条数据单独占一个页面,这个时候就要对数据进行一个向上的取整，

最后，在页面渲染数据时，渲染 searchList 即可

    备注一下：

      computed()：计算属性

• computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

 

      slice(start, end) 方法

     可提取字符串的某个部分，并以新的字符串返回被提取的部分。

     使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。

   最后的最后，上图镇楼。祝各位前程似锦，加油向前冲...............