Element-ui el-pagination封装之sync多层的问题

因为vue一般情况是数据单向流向，父到值，而这里 错误就是数据流向的问题。可以参考sync用法

简易封装核心：

//省略
<el-pagination
        :current-page.sync="page"
        :page-size.sync="rows"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total"
        :page-sizes="[10, 15, 30, 50]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
  />
  ...//省略
  props:{
     
    total: {
     
      // 数据总条数
      type: [Number, String],
      default: 0
    },
    rows: {
     
      // 每页数据条数
      type: [Number, String],
      default: 10
    },
    page: {
     
      // 当前页数
      type: [Number, String],
      default: 1
    }
  }
  //省略
  methods:{
     
	handleSizeChange(val) 
      this.$emit('update:rows', val); 
      this.$emit('page-rows'); // 触发@page-rows=请求分页数据。
    },
    handlePageChange(val) {
     
      this.$emit('update:page', val); 
      this.$emit('page-rows'); // 触发@page-rows=请求分页数据。
    },	
  }

使用：

 :page.sync="query.page" :rows.sync="query.rows"

然而在切换分页时，发现依然报错。

原因:
报错的不是我封装的数据流向问题。而是el-pagination本身也改变了数据流向。而这个时候会自动触发改变我自己封装内的数据，然后又继而触发，父组件调用我封装的组件从而引发错误。
只需要，将封装组件内的.sync 去掉，让我手动去$emit('update:xx',val)即可。

修改：

<el-pagination
        :current-page="page"//这里去掉.sync //通过监听handlePageChange 在其内手动触发$emit('update:xx',val)来更新调用的父组件
        :page-size="rows"//这里去掉.sync。同上
        layout="total,sizes,prev, pager, next, jumper"
        :total="total"
        :page-sizes="[10, 15, 30, 50]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
  />

千里之行
始于足下