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解决:

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

相关推荐
迅速的自行车3 小时前
从一段模板说起
前端·javascript·vue.js
阿奇__8 小时前
uniapp微信小程序图片上传含回显组件(拍照,相册)
前端·javascript·vue.js
前端甜糖9 小时前
前端如何实现在线预览office常见文件功能?
前端·vue.js
ljs64827395110 小时前
智慧商城(Smart Mall):基于 Spring Boot + Vue 3 的现代化电商平台实战
linux·vue.js·spring boot·后端
析数塔11 小时前
2026前端框架深度解析:React Compiler、Angular Zoneless、Vue 3.5重写游戏规则
前端·vue.js·react.js
paopaokaka_luck1 天前
英语单词学习系统的设计与实现(基于艾宾浩斯遗忘曲线的智能复习机制、语音朗读、多题型测试与错题自动收录、Echarts图形化分析)
vue.js·spring boot·后端·echarts
Momo__1 天前
Vite 8.1 打包开发模式——10000 组件冷启动 15 倍,"No Bundle Dev" 七年后被自己终结
前端·vue.js·vite
HUMHSX1 天前
Vue 组件通信核心知识点梳理
javascript·vue.js·ecmascript
妙码生花1 天前
从 PHP 到 AI + Golang,程序员自救转型手记(二十六):icon 组件封装
前端·vue.js·typescript
李明卫杭州1 天前
Vue2 & Vue3 中 Router `props` 配置详解:彻底摆脱 `$route` 依赖
前端·vue.js·前端框架