在 Vue 3 中，无法直接通过模板语法访问父级 HTML 元素的 data-* 属性；正确方式是使用 ref 获取组件根元素，再通过原生 DOM 方法（如 parentElement.getAttribute()）读取父级 data-pagenumber 等属性，并在 onMounted 钩子中赋值给响应式 prop。
在 vue 3 中，无法直接通过模板语法访问父级 html 元素的 `data-*` 属性；正确方式是使用 `ref` 获取组件根元素，再通过原生 dom 方法（如 `parentelement.getattribute()`）读取父级 `data-pagenumber` 等属性，并在 `onmounted` 钩子中赋值给响应式 prop。
在 Vue 3 的组合式 API 中，$parent 和 Vue 2 中的 $attrs 行为已发生重大变更：$attrs 默认不包含非 props 声明的 attribute（如 data-pagenumber），且 setup() 上下文不再隐式提供 this 或 $parent。因此，依赖响应式上下文穿透的方式不再适用——必须回归 DOM 层面进行显式查询。
推荐做法是：为子组件根元素添加 ref，在 onMounted 生命周期钩子中，通过 ref.value.parentElement 向上查找最近的父容器，再调用 getAttribute('data-pagenumber') 获取值，并同步至组件内部的响应式状态（如 ref
以下是完整可运行示例：
