.sync vue el-pagination

封装el-pagination使用.sycn，伪代码如下

• 调用方： <pagination :page.sync="pageInfo.page" :limit.sync="pageInfo.size" @pagination="pageChange"  >

• 分页组件封装：

    <el-pagination :current-page.sync="currentPage"

 :page-size.sync="pageSize"

/>

prop接收参数：

    page: ,

    limit:,

使用计算属性更新：

  computed: {

    currentPage: {

      get() { return this.page

      set(val) {this.$emit("update:page",val)

    pageSize: {

      get() {return this.limit},

      set(val) {this.$emit("update:limit",val)

现象：

如果跳转到n页，切换pageSize，使总页数小于n

Console.log(‘this.pageInfo’,this.pageInfo)//最新的值

Console.log(‘this.pageInfo.page’,this.pageInfo.page)//read却是原来的旧的上一步的值

在计算属性currentPage的setget方法，添加log

Console.log(‘this.pageInfo.page’,this.pageInfo.page)的输出顺序总是在分页组件更新emit(udpate:page)方法执行之前

el-paginationd的pageSize变化，会引发page的重新计算，并且是延迟更新的

• 解决方案如下 currentPage: { get() {  let pageVal = 1    this.$nextTick(() => {         pageVal = this.page

})

return pageVal },

 set(val) { this.$emit('update:page', val)}},

 空了可讲解下el-pagination源码和.sync机制，可考虑下这里的.sync使用是否妥当