ref 不直接控制跳转，而是存储当前页码状态；跳转由 goto 方法触发，通过更新 ref 值并 emit 事件实现父子同步，所有交互入口均需经此逻辑保证状态一致。
在分页器组件中，ref 本身不直接“控制跳转”，而是作为响应式引用容器，配合事件触发、状态更新和父子通信来实现页码跳转。关键在于：**ref 存状态，逻辑在方法里，同步靠 emit 或 v-model，跳转由 goTo 触发**。
ref 用来存当前页码（基础状态）
分页组件内部通常用 ref 管理本地页码状态，但需注意它只是“快照”，不能脱离响应式机制单独驱动跳转：
- 定义：
const currentPage = ref(props.pageNo || 1)—— 初始值来自父组件传入的pageNo - 更新必须触发同步行为，比如：
currentPage.value = newPage; emit('getPageNo', newPage) - 不能只改
currentPage.value就完事，否则父组件不知道变化，数据请求也不会执行
跳转动作要封装成可调用函数（如 goTo）
真正执行跳转的是一个方法，它内部操作 ref 并联动外部逻辑：
- 示例：
const goTo = (page) => { if (page totalPages.value) return; currentPage.value = page; emit('getPageNo', page); } - 这个
goTo可通过作用域插槽暴露给父组件：<template goto><button>跳第3页</button> </template> - 也可绑定到上一页/下一页按钮：
@click="goTo(currentPage.value - 1)"
与父组件保持双向同步（避免 ref 脱离控制）
如果父组件用 v-model:page="current"，子组件应使用 defineModel()（Vue 3.4+）或手动处理 update:page 事件，而不是仅依赖 ref：
- 推荐写法（Vue 3.4+）：
const model = defineModel('page');→ 直接读写model.value，自动触发同步 - 兼容写法：
const currentPage = ref(props.pageNo); watch(() => props.pageNo, (val) => currentPage.value = val);防止父组件外部修改页码时子组件不同步 - ⚠️ 常见错误：在插槽中直接
currentPage.value = 5却不 emit，导致父组件状态滞留
键盘跳转等交互也走同一套 ref + 方法逻辑
比如监听 Enter 键跳转输入框，本质仍是更新 ref 并调用跳转函数：
<input> goTo(Number($event.target.value))" />- 输入校验、防抖、拦截等逻辑都加在
goTo内部，保证所有入口行为一致 - 这样无论点击按钮、按键盘、还是父组件调用
goTo(7)，都经过同一响应链，ref 始终准确反映当前有效页码
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
