Vue.js 在 Vue 3 组件中处理 HTML 原生属性透传-Vue.js-PHP中文网

vue 3 中 html 原生属性透传默认自动绑定到单根组件根元素，class/style 合并，多根组件需手动用 v-bind="$attrs" 指定目标，data-* 属性不响应式，应通过 useattrs() 或 dom api 获取。

vue.js 在 vue 3 组件中处理 html 原生属性透传

Vue 3 中处理 HTML 原生属性透传，核心在于理解哪些属性会自动继承、何时需要手动干预，以及如何精准控制绑定目标。它不是“全有或全无”的机制，而是可配置、可拆解、可定向的。

哪些原生属性默认会被透传

父组件传入但未在子组件 defineProps 中声明的 HTML 属性，只要不是 class 或 style（它们有合并逻辑），都会进入 $attrs 并默认绑定到单根组件的根元素上。常见包括：

id、data-*（如 data-id、data-role）
aria-*（如 aria-label、aria-hidden）
tabindex、disabled、readonly 等表单相关属性
title、alt、role 等语义化属性

单根组件：自动透传 + class/style 合并

当子组件只有一个根元素时，Vue 3 会自动把未声明的原生属性挂到该元素上，并且特别处理 class 和 style：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

class 不覆盖，而是合并：子组件模板中写的 class="btn" 与父组件传的 class="primary small" 会一起生效
style 同样合并：内联样式对象会浅合并，同名 CSS 属性以父组件传入的为准
其他属性（如 id、data-test）直接写入 DOM，不合并也不报错

多根组件：必须手动指定透传目标

如果子组件模板有多个顶层元素（比如

），Vue 不会猜测该把 id 或 data-* 绑到哪个节点上，因此会抛出警告：

Extraneous non-props attributes were passed to component but could not be auto inherited.

此时需显式选择接收位置：

用 v-bind="$attrs" 绑定到某个特定元素，例如：<main v-bind="$attrs"></main>
若只想透传部分属性，可解构使用：<div :id="$attrs.id" :data-role="$attrs['data-role']"> <li>配合 <code>inheritAttrs: false 关闭默认行为，避免意外污染根节点

读取和使用 data-* 属性的注意事项

虽然 data-* 属性会进入 $attrs，但不能直接当作响应式数据使用——它只是字符串值，不带响应性。若需监听变化或参与逻辑：

在组合式 API 中，用 const attrs = useAttrs() 获取，再通过 watchEffect 或计算属性处理
不要试图在 setup() 初始阶段读取 attrs['data-id'] 并赋给 ref，因为 $attrs 是响应式代理，其属性访问本身不触发依赖收集
如需在 DOM 渲染后读取父级容器的 data- 属性（比如嵌套在第三方容器中），应改用 ref + onMounted + parentElement.getAttribute()