data-product-id 是唯一推荐的商品ID传参方式，必须配合type="button"及dataset读取，禁用class、URL参数等易失效方式；多参数应统一注入data属性并手动类型转换；按钮须自持完整参数，禁用父容器委托；请求前需校验、防连点并POST JSON。
data-product-id 是唯一推荐的传参方式
别用 id、name、URL query string 或 class 名拼接 ID。这些方式语义不清、易被误读，且在 DOM 结构变动或服务端渲染不一致时直接失效。只有 data-product-id 被广泛约定为商品主键载体，JS 可靠读取，后端接口（如 /api/cart/add）也默认匹配该字段。
常见错误： —— JS 得用正则从 class 里抠数字，一加空格或改命名规则就崩； —— 点击触发跳转，破坏单页体验，且无法携带 quantity、sku 等额外参数。
正确写法必须包含：
-
type="button"（防表单 submit） -
data-product-id="1057"（必需，字符串或数字需与后端一致） - 如有 SKU 变体，同步加
data-sku-id="sku-2026-blue-m"
多参数怎么安全附带？避免重复解析和类型错乱
除了 ID，价格、库存、规格等不能靠 JS 从 DOM 树里层层查找（比如 this.parentNode.querySelector('.price').textContent），那样耦合太重、易断。
推荐做法是把必要字段一次性塞进 data 属性，由服务端渲染或构建时注入：
<button type="button" data-product-id="1057" data-sku-id="sku-2026-blue-m" data-price="89.00" data-stock="12" data-unit="件">加入购物车</button>
JS 中统一用 dataset 读取：
const btn = event.target; const productId = btn.dataset.productId; // 自动转驼峰：product-id → productId const skuId = btn.dataset.skuId; const price = parseFloat(btn.dataset.price);
注意点：
-
dataset返回的全是字符串，数值类务必手动转换（parseInt/parseFloat） - 不要依赖
innerHTML或textContent提取价格——促销价/划线价容易拿错 - 服务端渲染时确保
data-price和接口要求的字段类型一致（例如后端要 number，你就别传 "89.00 元"）
为什么不能只靠事件委托 + 父容器传参？
有人试图给商品卡片容器加 click 监听，再用 event.target.matches('button') 区分点击源，然后从父级 data- 属性读商品信息。这在简单静态页面可行，但实际项目中极易出问题：
- 卡片内有多个按钮（如“收藏”“对比”），
event.target可能不是加购按钮，但父级data-是共享的 - 动态插入商品（如分页加载、搜索结果）时，父容器的
dataset可能没及时更新，或被上一条数据覆盖 - 服务端 SSR 和前端 hydration 不一致时，父级
data-值可能为空或错位
结论：每个加购按钮必须自持完整参数，不依赖父级上下文。这是可维护性和稳定性的底线。
传参后 JS 怎么用？fetch 请求前的关键检查项
拿到参数只是第一步，真正发请求前必须做三件事：
- 立刻设
btn.disabled = true和btn.setAttribute('aria-busy', 'true')，防连点 - 校验
productId是否存在、是否为非空字符串/有效数字；SKU 若必填，也要检查skuId - 构造请求体时，用
JSON.stringify({ productId, skuId, quantity: 1 })，别拼 URL 查询参数
错误示范：fetch(`/api/cart/add?pid=${productId}&qty=1`) —— 无 Content-Type 头，后端难统一处理，且 GET 有长度限制；正确应 POST JSON，服务端明确接收 application/json。
最后提醒：所有传参值最终要和服务端接口文档字段名、类型、必填性严格对齐。前端传 data-product-id，后端却期待 product_id 字段，或把字符串 ID 当整数解析，都会导致静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
