因为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"
/>
千里之行
始于足下