本文详解 vue 3 中父子组件通信时常见的 extraneous non-props attributes 警告成因与解决方案，涵盖 html 模板解析限制、属性命名规范、单根节点要求及 inheritattrs 控制策略。
在 Vue 3 中，当使用 DOM 内模板（即直接在 HTML 中书写 <template> 或内联模板）时，父组件向子组件传递 prop 必须严格遵循 HTML 的属性命名规则——使用短横线分隔的 kebab-case 形式，而非 JavaScript 中的 camelCase。这是因为浏览器原生 HTML 解析器不区分大小写，会将 parentData 自动转为小写 parentdata，导致 Vue 无法将其正确映射到子组件声明的 parentData prop 上，从而触发如下警告：
[Vue warn]: Extraneous non-props attributes (parentdata) were passed to component...
✅ 正确做法是：在模板中使用 parent-data（kebab-case），与子组件 props 中定义的 parentData（camelCase）自动匹配：
<div id="app">
<child parent-data="Data From Parent"></child>
</div>
<template id="child_comp">
<div>Child component test: [[ parentData ]]</div> <!-- 注意：必须有单根节点 -->
</template>
<script>
const Child = {
props: ['parentData'],
template: '#child_comp',
delimiters: ['[[', ']]'],
mounted() {
console.log(this.parentData); // ✅ 输出 "Data From Parent"
}
}
Vue.createApp({
components: { child: Child }
}).mount('#app')
</script>⚠️ 同时需注意两个关键约束：
单根节点（Single Root Node）
Vue 3 不再支持多根节点模板（如 <span>...</span><br/>）。若子组件模板无外层包裹元素，Vue 将无法继承非 prop 属性（如 parent-data），进而触发警告。因此务必确保模板内容被一个根元素（如 <div>、<section>）包裹。-
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 模板解析陷阱。
通过遵循以上规范，即可彻底解决该警告，并确保父子组件间数据传递稳定、可维护。
