在 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<number>）。该方案稳定、语义清晰，且完全兼容 SSR（服务端渲染）以外的客户端场景（因 onMounted 仅在浏览器端执行）。
以下是完整可运行示例：
<script setup>
import { ref, onMounted } from 'vue'
const paging = ref(null)
const number = ref(0)
onMounted(() => {
const parent = paging.value?.parentElement
const pageAttr = parent?.getAttribute('data-pagenumber')
if (pageAttr !== null && !isNaN(Number(pageAttr))) {
number.value = Number(pageAttr)
}
})
</script>
<template>
<div ref="paging" class="paging-root">
<h3>Page Number from parent div: {{ number }}</h3>
<!-- 可继续使用 number 作为计算逻辑或透传给更深层子组件 -->
</div>
</template>使用时，只需将该组件嵌套在带有 data-pagenumber 的容器中：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
<div data-pagenumber="23" class="printed-page"> <SomePagingComponent /> </div>
⚠️ 注意事项：
- 确保 DOM 已挂载：务必在 onMounted（而非 setup 同步执行阶段）读取 parentElement，否则 ref.value 为 null；
- 健壮性处理：建议对 getAttribute() 返回值做空值与类型校验（如 isNaN 检查），避免非数字字符串导致逻辑异常；
- 不适用于 SSR：此方案依赖浏览器 DOM API，若项目启用服务端渲染，请改用 provide/inject 或全局状态管理（如 Pinia）预置页码数据；
- 替代思路：若需频繁跨层级传递结构化元数据，建议将 data-pagenumber 等信息提前注入应用上下文（例如通过 app.config.globalProperties 或初始化时解析 <body> 属性），而非每次动态查询。
该方法简洁、低侵入，特别适合打印/分页等 DOM 密集型增强场景——既保持 HTML 属性的语义化与外部可控性，又满足 Vue 3 响应式系统的集成要求。
