[vue3.x]实战问题--Extraneous non-props attributes

最新推荐文章于 2024-05-24 18:26:39 发布
最新推荐文章于 2024-05-24 18:26:39 发布
阅读量2.1k 收藏
点赞数
分类专栏： 前端 html 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54850952/article/details/123374377
版权
前端 同时被 2 个专栏收录
53 篇文章 1 订阅
订阅专栏
html
53 篇文章 0 订阅
订阅专栏

Vue3.x 开发问题

开发环境

	"vue-i18n": "^9.1.6",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"

问题描述

Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

问题解析

导致该问题的主要原因是传递了没有解析的属性，可以检查一下你用的第三方的组件，或者自己编写的组件，是否 存在没有解析的属性，例如：class等属性

Forpear
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js -- Non-props属性
Sun_blog
07-08 295
目录Non-prop属性子组件存在单个根节点inheritAttrs子组件存在多个根节点总结 Non-prop属性 Non-prop属性：父组件给子组件传递内容时，子组件不通过pros接收时使用。 子组件存在单个根节点 子组件存在单个根节点时，vue底层会将父组件传递过来的内容置于子组件最外层标签上，变成子组件最外层签的一个属性。 代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset=
基于Vue3.X的Vue-Cropper封面上传裁剪实例
10-29
由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！ 注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。
[Vue warn]: Extraneous non-props attributes (style) were passed to component but could not be 警告
choose_Mings的博客
04-29 2691
使用vue3的时候莫名出现了这个警告，但是不影响使用，原因是template标签下的代码还需要一层标签包裹。 问题代码： <template> <div class="">任务管理</div> <div class="">任务管理</div> <div class="">任务管理</div> </template> 解决： <template> <div clas..
警告：Extraneous non-props attributes (data) were passed to component but could not be automatica
最新发布
goodnight2333333的博客
05-24 443
这个警告一般是因为在Vue组件中，给组件传递了没有在组件props中声明的属性。这可能会导致意外行为，因为这些属性并不会被组件自动接收。只需要在子组件中定义并接受父组件传来的参数，即可解决警告~
重学vue之Non-Props属性
qq_45549336的博客
12-10 665
说明 就是说在父组件中给子组件传递值，但是子组件不在prop中接受 案例 父组件中 <template> <div> <child oldMsg="hello" oldMsg1="hello1" /> </div> </template> 子组件中只有一个div时候 <template> <!-- 自动获取全部属性 --> <div>child
解决Extraneous non-props attributes (border, class) were passed to component but could not be
weixin_43934104的博客
08-30 9062
建议去element-plus官网文档查看自己的属性是哪里不对https://element-plus.gitee.io/zh-CN/component/dialog.html看图，我的组件里面写的这个el-dialog就有两个地方不对，跟官方的属性对不上就改成官方的，class也不能用了，得按照官方文档去设置属性。...
[Vue warn]: Extraneous non-props attributes (fileList) were passed to component but……
weixin_44384273的博客
01-17 1159
1.第一种情况，就是你有需要传输一个prop属性的数据给子组件，但是你在子组件中忘记用defineProps接收，无意中触发了透传 Attributes，在使用setup语法糖的情况下注意使用defineProps接收props属性数据。2.第二种情况，就是你不需要传输一个prop属性的数据给子组件，但是你在整理代码时，忘记将父组件的子组件标签中的:xxx="xxx"删除。一般是上面三种情况之一，我这边排查后是第二种情况，父组件将 fileList 传给了子组件，子组件没有使用，导致这个预警。
vue-iscroll-view:Vue 2.x的iScroll-view组件
05-07
$ npm i vue-iscroll-view $ npm i iscroll 开始吧 import IScrollView from 'vue-iscroll-view' /* Using these kinds of IScroll class for different cases. */ import IScroll from 'iscroll' // import IScroll...
基于 vite4.x-vue-cli5.x + vue3.x + ant-de-vue3-antdv-admin.zip
11-06
描述部分"基于 vite4.x-vue-cli5.x + vue3.x + ant-de-vue3-antdv-admin"是对标题的进一步确认，说明这个项目或压缩包内容是一个采用最新版本Vite和Vue CLI的Vue 3项目，配合Ant Design Vue 3来构建的后台管理系统。...
基于vue3.x和element-plus的后台管理系统.zip
01-04
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
基于vite2.x + vue3.x + ant-design-vue3.x + typescript基础后台管理系统模板
07-08
在vue3.x和ant-design-vue3.x的配合下，typescript能够确保组件接口和props类型的一致性，提高开发效率。 5. **基础后台管理系统模板**：此模板通常包含登录、权限管理、路由控制、布局、表格、表单等通用功能，为...
vue3.X+element+cli4.0
05-07
动态路由，自定义命令，promise 封装
vue3 组件naiveui报错： Extraneous non-props attributes (class) were passed to component but could not be
什么意思哦
12-13 2518
vue3 组件naiveui报错 Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
vue3使用el-tooltip，vue3警告：[Vue warn]: Extraneous non-props attributes (class...
dekuyu blog
06-12 504
vue3中使用el-tooltip组件包裹组件svg-icon时报警告，且el-tooltip失效
解决警告（Extraneous non-props attributes (highlight-current-row, stripe, row-class-name) were passed t）
qq_40913592的博客
08-04 635
这是一个自己封装的table组件，在组件内需要根据changeTab来显隐这个table，但是在隐藏这个table的时候，外部传递进来的props属性无法被继承，所以报了这个警告。这个问题是由于你在组件中传递了一些非 props 属性，但由于组件渲染的是片段或文本根节点，这些属性无法自动继承。要解决这个警告，你可以使用。百度搜索了一下 链接超多 都没办法解决，让我在外面加div 也没办法解决。指令将这些属性绑定到组件的 props 上，或者在组件中使用。以下是问ai，ai回复我的。基本上和我分析的差不多。
Vue3.x属性继承报错解决
热门推荐
qq_38888512的博客
05-24 1万+
编写vue组件的时候莫名报了下面的警告: [Vue warn]: Extraneous non-props attributes (border, style) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. at xxxx(发生问题的组件位置) at ... 解决： 在自定义组件上添加了border、style属性
【vue警告】[Vue warn]: Extraneous non-props attributes (class) were passed to component but could
周金鱼啊
11-23 6539
[Vue warn]: Extraneous non-emits event listeners (refreshRelationList) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event liste
vue2.x + ant-design-vue@1.6.0 升级到vue3+ ant-design-vue@3.2.15 需要你帮我例举一些注意的点
04-11
当将 Vue 2.x 和 Ant Design Vue 1.6.0 升级到 Vue 3 和 Ant Design Vue 3.2.15 时，需要注意以下几点： 1. 首先要确保您的项目已经升级到Vue 3，并且您的项目不依赖于 Vue 2.x 。如果您的项目仍然依赖于 Vue 2.x 的某些功能，您需要先升级这些功能到 Vue 3 的等效实现。 2. 接下来，您需要将 Ant Design Vue 1.6.0 升级到 Ant Design Vue 2.x，再升级到 Ant Design Vue 3.2.15。这是因为 Ant Design Vue 3.2.15 不再支持 Vue 2.x。 3. 在升级过程中，您需要注意查看 Ant Design Vue 2.x 和 3.x 的文档，以了解诸如组件属性变化、组件命名空间的更改、事件 API 更改等。 4. 另外，在升级过程中，您可能还需要重新编写一些代码，因为 Vue 3 与 Vue 2.x 在某些方面有一些不兼容的变化。例如，Vue 3 不再支持 v-bind.sync 和 v-once 指令。 5. 最后，确保在升级过程中进行足够的测试，以确保您的应用程序在新环境中能够正常运行，并检查应用程序的性能是否受到影响。 希望这些注意点能够帮助您顺利完成升级。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值