用 ref 管理分页页码的核心是父组件通过 ref 控制 currentPage，并以 prop 传入子组件；子组件通过 emit('change-page', newPage) 通知父组件更新 currentPage.value，父组件响应后触发 computed 数据切片重新计算，实现分页数据动态渲染。
用 ref 管理分页组件的当前页码，核心是让父组件控制页码变化，并通过事件通知子组件更新或触发数据请求。
父组件中用 ref 定义并传递 currentPage
在父组件 setup 中，用 ref 创建响应式页码变量，通常默认为 1：
- const currentPage = ref(1)
- 同时定义每页条数和总条数，例如：const pageSize = ref(10); const totalItems = ref(127)
- 将 currentPage 作为 prop 传给分页子组件：
<mypagination :current-page="currentPage" :total="totalItems" :page-size="pageSize"></mypagination>
子组件接收并响应页码变更
子组件不直接修改父组件的 ref，而是通过 emit 事件把新页码“告诉”父组件：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- props 声明 currentPage 为
Number类型（注意：不能直接 v-model 绑定 ref，需配合v-model:current-page语法或手动处理） - 点击页码或上下页时，调用
emit('change-page', newPage) - 父组件的 handlePageChange 方法收到后，直接赋值：
currentPage.value = newPage—— 这会自动触发重新计算展示数据和子组件刷新
配合 computed 实现当前页数据切片
页码状态变化后，需实时计算当前页应显示哪些数据：
立即学习“前端免费学习笔记（深入）”；
- 用 computed 派生出当前页数据：
const displayedItems = computed(() => list.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)) - 这个计算属性会随 currentPage.value 或 pageSize.value 变化自动更新，表格只需绑定 displayedItems 即可
注意 ref 的响应性边界
如果子组件想“内部维护”页码（如做临时预览），可用独立 ref，但必须同步到父组件才能影响真实分页逻辑：
- 避免在子组件里直接改 props.currentPage —— Vue 会警告且不生效
- 若需双向绑定效果，推荐使用
v-model:current-page语法，父组件写v-model:current-page="currentPage"，子组件 props 接收currentPage并 emitupdate:current-page事件 - 这样既保持 ref 的响应性，又符合 Vue 3 的响应式通信规范
