<p>Vue 中 data-* 属性渲染后消失，是因为默认不声明为 prop 时不会进入 $attrs，需设置 inheritAttrs: false 并手动 v-bind="$attrs" 绑定；若声明为 prop 则不透传。</p>
Vue 中 data-* 属性为什么渲染后消失
因为 Vue 默认会过滤掉所有非 prop 声明的属性，data-tracking-id 这类属性根本不会进入组件的根元素 DOM。它不是被隐藏了，是压根没传进去。
必须显式配置：inheritAttrs: false + 在模板中用 v-bind="$attrs" 手动挂载到目标元素上。否则 document.querySelector('button').dataset.trackingId 一定返回 undefined。
- 如果组件用了
<slot></slot>或封装了多层 wrapper，透传链容易断裂，得逐层检查是否漏了v-bind="$attrs" - 使用
defineOptions({ inheritAttrs: false })是 Composition API 下更简洁的写法 - 注意：只有非 prop 属性才走
$attrs，如果data-id同时被声明为 prop，那它会被优先当 prop 处理，不再进$attrs
React 中 data-* 属性不生效的典型原因
函数组件默认不接收任何未声明的 props，data-feature="search" 不会自动出现在 props 对象里——它被 React 引擎直接丢弃了。
正确做法是解构或展开：{...restProps} 或显式提取 const { 'data-feature': feature, ...rest } = props，再把 rest 传给底层元素。
立即学习“前端免费学习笔记（深入）”；
Vue 3 组合式 API 与
相关专题
Python属于前端也属于后端，其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容，供大家免费下载体验。
2523
2023.08.11
实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍：1、WebSocket，它可以在客户端和服务器之间建立持久连接，实现实时的双向通信，前端可以使用 WebSocket API来创建WebSocket连接，并通过发送和接收消息来实现即时通讯；2、Long Polling，是一种模拟实时通信的技术等等。
5443
2023.10.09
前端外包工作内容包括：1. 网站和应用程序开发；2. 用户界面和交互设计；3. 用户体验优化；4. 设计和视觉开发；5. 跨浏览器兼容性；6. 性能优化；7. 维护和更新；8. 项目管理和沟通。想了解更多前端的相关内容，可以阅读本专题下面的文章。
863
2024.05.22
html版权符号是“©”，可以在html源文件中直接输入或者从word中复制粘贴过来，php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。
6235
2023.06.14
html在线编辑器是用于在线编辑的工具，编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方，是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容，供大家免费下载使用。
3492
2023.06.21
html网页制作是指使用超文本标记语言来设计和创建网页的过程，html是一种标记语言，它使用标记来描述文档结构和语义，并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容，供大家免费下载体验。
3170
2023.07.31
Java应用运行缓慢，如何调整JVM参数？本专题介绍OpenJDK JVM性能调优的基本流程，涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析，帮助你先定位瓶颈，再通过对照测试验证效果，避免直接套用参数而影响应用稳定性。
20
2026.10.16
热门下载
相关下载
精品课程
最新文章
