17370845950

新闻动态

Vue 3 中父组件向子组件传值的正确方式

本文详解 vue 3 中父子组件通信时常见的 extraneous non-props attributes 警告成因与解决方案，涵盖 html 模板解析限制、属性命名规范、单根节点要求及 inheritattrs 控制策略。

在 Vue 3 中，当使用 DOM 内模板（即直接在 HTML 中书写

[Vue warn]: Extraneous non-props attributes (parentdata) were passed to component...

✅ 正确做法是：在模板中使用 parent-data（kebab-case），与子组件 props 中定义的 parentData（camelCase）自动匹配：

⚠️ 同时需注意两个关键约束：

单根节点（Single Root Node）
Vue 3 不再支持多根节点模板（如 ...
）。若子组件模板无外层包裹元素，Vue 将无法继承非 prop 属性（如 parent-data），进而触发警告。因此务必确保模板内容被一个根元素（如
、
）包裹。
inheritAttrs: false 的适用场景
若你明确不需要将未声明的 attribute 继承到子组件根元素上（例如已手动处理或用于其他目的），可在子组件中设置：
```
export default {
  inheritAttrs: false,
  props: ['parentData'],
  // ...
}
```
这将静默丢弃未声明的 attribute，消除警告——但仅建议在有明确控制需求时使用，不可替代正确的 prop 传递。
? 总结最佳实践：
- ✅ 在 DOM 模板中，始终用 kebab-case 书写 prop attribute（如 parent-data）；
- ✅ 子组件模板必须有且仅有一个根元素；
- ✅ 避免在 HTML 中直接写 parentData="..."（camelCase），它在 DOM 模板中无效；
- ✅ 如使用 SFC（.vue 文件）或字符串模板，则 camelCase 可直接使用，不受此限制；
- ✅ 开发中优先采用 SFC 或构建工具环境，规避 DOM 模板解析陷阱。
通过遵循以上规范，即可彻底解决该警告，并确保父子组件间数据传递稳定、可维护。