Vue.js/uniapp传递数组警告:传递了不属于属性的额外属性给组件,但无法自动继承

遇到问题

uniapp报错:[Vue warn]: Extraneous non-props attributes (xx) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

问百度

搜索到基本都是这样的答案

第一种情况,就是你有需要传输一个prop属性的数据给子组件,但是你在子组件中忘记用defineProps接收,无意中触发了透传 Attributes,在使用setup语法糖的情况下注意使用defineProps接收props属性数据。

第二种情况,就是你不需要传输一个prop属性的数据给子组件,但是你在整理代码时,忘记将父组件的子组件标签中的:xxx="xxx"删除

第三种情况,你确确实实需要传递一个非prop属性数据到子组件中,但子组件中存在多个根节点,你可以在该根节点使用v-bind="$attrs"进行显式绑定,就可以避免报错了。

疑惑

疑惑的是我不是组件问题,而是页面传参后导致的问题

解决

吃饭回来继续加班,仔细对比了一下英文跟中文的提示,看到root nodes,找到了问题。

报错的代码:

加一层root nodes解决:

后续再看之前百度搜索到的那些解决方案,感觉组件里报错也可能是这个问题导致的,具体没有去验证了。毕竟我非专业前端,能用就行。

相关推荐
单线程1213841 分钟前
从案例分析 Vue3 Tokenizer+Parser 源码五
前端·javascript·vue.js
leoZ23110 小时前
2026-09-09-springboot-cloud-deploy-pitfalls
java·前端·javascript·vue.js·人工智能·spring boot·后端
芭拉拉小魔仙11 小时前
Vue 2 门诊收费系统中的医保结算流程设计与实践
前端·javascript·vue.js
JunjunZ15 小时前
Naive UI 虚拟级联选择器适配 Element Plus 风格
前端·javascript·vue.js
闲坐含香咀翠16 小时前
百万行数据透视表,我是怎么把 Vue 响应式开销砍到零的
前端·vue.js·性能优化
许彰午17 小时前
34-安全复盘96个问题
前端·vue.js·安全
志尊宝18 小时前
Vue3 零基础每日笔记(009):watch 侦听器——数据一变就“做事“
vue.js·笔记·缓存
一夜枫林18 小时前
vue实现scroll-view上下滑动右侧左右滑动
前端·javascript·vue.js
志尊宝18 小时前
Vue3 零基础每日笔记(011):生命周期钩子——在正确的时间做正确的事
javascript·vue.js·笔记
卤蛋fg619 小时前
vue 甘特图组件 vxe-gantt 依赖连接线可视化拖拽创建与双击删除
vue.js