Vue 3 中 v-model:current-page 是 Element Plus 分页组件原生支持的双向绑定语法，配合 ref 响应式变量自动同步页码；同时支持 v-model:page-size，并可通过 @current-change 触发业务逻辑。
Vue 3 中用 v-model 绑定分页组件的当前页码，核心是利用 v-model:current-page 语法，配合响应式变量（如 ref）实现双向同步。它不是“模拟”绑定，而是 Element Plus 等主流 UI 库原生支持的标准化写法。
直接用 v-model:current-page 绑定 ref 变量
Element Plus 的 <el-pagination></el-pagination> 支持 v-model:current-page 和 v-model:page-size 两个 v-model 修饰符。只需提供一个 ref 类型的变量，就能自动同步用户点击页码、输入跳转、点击上/下页等操作：
-
定义响应式页码：在
setup()中声明currentPage = ref(1) -
模板中绑定：
<el-pagination v-model:current-page="currentPage" :total="total"></el-pagination> -
无需手动监听事件：页码变化后，
currentPage.value会自动更新，后续逻辑（如请求数据）可基于该值触发
配合 v-model:page-size 实现完整分页控制
页码和每页条数通常成对使用。二者都支持 v-model 语法，可同时绑定，保持状态一致性：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
-
v-model:current-page="currentPage"控制当前页 -
v-model:page-size="pageSize"控制每页数量 - 当用户切换
page-size（比如从 10 条改成 20 条），currentPage值仍保留，但实际展示的数据范围会重新计算——若需重置页码（如回到第 1 页），需在@size-change回调里手动赋值：currentPage.value = 1
封装为自定义分页组件时的 v-model 用法
如果抽离成独立的 Pagination.vue 子组件，要支持父组件用 v-model 传入页码对象（如 { num: 1, size: 10 }），需按 Vue 3 规范实现：
立即学习“前端免费学习笔记（深入）”；
- 子组件接收
modelValueprop（类型为 Object） - 用
toRefs(props.modelValue)解构出可响应式访问的num和size - 内部
<el-pagination></el-pagination>绑定v-model:current-page="num"和v-model:page-size="size" - 页码变更时，通过
emit('update:modelValue', { num: newNum, size: newSize })向上同步
注意与 @current-change 的配合时机
v-model:current-page 负责状态同步，@current-change 负责业务响应。两者不冲突，常一起使用：
-
v-model:current-page确保组件内页码显示和外部变量一致 -
@current-change="loadData"在页码确定变更后触发接口请求或数据切片 - 不要在
@current-change回调里再手动改currentPage.value，v-model 已完成这步，重复赋值可能引发警告或逻辑错乱
