Vue3模板中如何获取父元素data属性并传入组件Props

针对你遇到的Vue3场景（父元素是普通DOM节点，带有data-pagenumber属性，需要将其值传给子组件SomePagingComponent的number Prop，且Vue2的$parent/$attrs方案失效），提供以下可行方案：

为什么旧方案失效 #

Vue3中$parent指向的是Vue组件实例的父组件，而非DOM结构上的父元素；$attrs仅负责传递组件间的属性，无法读取普通DOM元素的自定义data属性，所以之前的方法不适用。

方案一：父组件中读取自身根DOM的data属性后传递 #

如果带有data-pagenumber的div是父组件的根元素，可以通过ref获取DOM节点，读取其dataset属性后传给子组件：

<template>
  <div ref="pageRoot" data-pagenumber="23" class="printed-page">
    <!-- 其他内容 -->
    <SomePagingComponent :number="pageNumber" />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import SomePagingComponent from './SomePagingComponent.vue'

const pageRoot = ref(null)
const pageNumber = ref(null)

onMounted(async () => {
  // 等待DOM完全渲染完成
  await nextTick()
  // 读取data属性（dataset会自动将kebab-case转为camelCase）
  pageNumber.value = pageRoot.value.dataset.pagenumber
})
</script>

方案二：子组件直接读取父DOM元素的data属性 #

如果子组件需要独立获取父DOM的data属性，可在子组件中通过$el（或ref）获取父节点，并读取其dataset：

<!-- SomePagingComponent.vue -->
<script setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue'

const number = ref(null)

onMounted(async () => {
  await nextTick()
  const parentDom = $el.parentElement
  // 初始化页码
  number.value = parentDom.dataset.pagenumber

  // 针对动态生成页面的场景：监听data-pagenumber属性变化
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mut => {
      if (mut.attributeName === 'data-pagenumber') {
        number.value = parentDom.dataset.pagenumber
      }
    })
  })
  observer.observe(parentDom, { attributes: true })

  // 组件卸载时停止监听，避免内存泄漏
  onUnmounted(() => observer.disconnect())
})
</script>

此时父组件模板无需手动传参：

<div data-pagenumber="23" class="printed-page">
  <!-- 其他内容 -->
  <SomePagingComponent />
</div>

注意事项 #

• 必须在onMounted+nextTick后读取DOM，确保节点已渲染完成；
• 动态生成页面时，使用MutationObserver监听属性变化，能实时同步页码更新；
• 如果父DOM不是直接父节点（比如中间有其他DOM），可调整parentElement为closest('.printed-page')来精准定位目标元素：

  const parentDom = $el.closest('.printed-page')
  

内容的提问来源于stack exchange，提问作者Kalnode