vue3报Extraneous non-props attributes (ref_key) were passed错误？

最新推荐文章于 2024-01-11 20:49:34 发布
最新推荐文章于 2024-01-11 20:49:34 发布
阅读量270 收藏
点赞数
文章标签： vue.js javascript 前端 ecmascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22889431/article/details/132996507
版权

vue3项目更新了element-plus版本后，项目开始疯狂报警告：

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

原因是：只更新了 element版本，没有更新 vue版本，

解决办法： 更新vue3的版本：npm install vue --save

特意写了一篇博文，留给还在苦恼的你！！！

省点时间Win站
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3.X+element+cli4.0
05-07
Vue3.X是Vue.js框架的最新版本，带来了许多性能优化和功能增强。在这个项目中，开发者使用了Vue3.X来构建应用，利用其响应式系统、Composition API和优化的渲染性能。Vue CLI 4.0是Vue的脚手架工具，简化了项目的...
Extraneous non-props attributes (ref_key) were passed to component but could not be automatically
weixin_43423103的博客
06-14 3264
今天遇到这个警告，排查了半天发现是vue版本和element plus版本不兼容导致的，我的vue版本是3.2.6，element plus 的版本是2.2.5警告的意思是 ref_key 这个属性不能被继承，网上有很多相关的报错，多数的解释是组件有多个根结点，需要将组件在template中用div包裹，尝试之后不能解决一番尝试之后怀疑是版本问题，于是去element plus 官网用Element Plus Playground 调试。Element Plus Playground可以切换vue 的版本和
Vue3报错：Extraneous non-props attributes (ref_key) were passed to component but could not be automatic
海风依旧
03-04 1178
Vue3报错：Extraneous non-props attributes (ref_key) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
vue3 element-ui plus:Extraneous non-props attributes (ref_key) were passed to component ....
u014678583的博客
06-28 3022
警告：Extraneous non-props attributes (ref_key) were passed to component but could not be automatically inherited because component renders fragment or text root nodes....
Vue3报错Extraneous non-props attributes (xxx) were passed to component but could not be ...
DM_Cxx的博客
06-09 2万+
今天在重构项目时遇到一个报错，趁有时间整理学习理解一下。首先的话这不是什么特别严重的报错。赶时间的朋友可以直接滑到最下面看解决办法。
Extraneous non-props attributes (XXX) were passed to component but could not be automatically
qq_26905813的博客
11-01 1万+
就是你有需要传输一个prop属性的数据给子组件，但是你在子组件中忘记用defineProps接收，无意中触发了透传 Attributes，在使用setup语法糖的情况下注意使用defineProps接收props属性数据。你确确实实需要传递一个非prop属性数据到子组件中，但子组件中存在多个根节点，你可以在该根节点使用v-bind=”$attrs"进行显式绑定，就可以避免报错了。就是你不需要传输一个prop属性的数据给子组件，但是你在整理代码时，忘记将父组件的子组件标签中的:xxx=“xxx"删除。
ct-ts-vue-demo_DEMO_vue-ts_vuetsdemo_
09-29
本DEMO项目“ct-ts-vue-demo”是为初学者准备的一个基础示例，旨在展示如何在Vue项目中集成和使用TypeScript。下面我们将详细讲解这个项目的关键知识点： 1. **初始化项目**： 使用`vue-cli`脚手架创建Vue项目时，...
renren-fast-vue_renren-fast-vue前端_renren_基于VUE_vue_
09-30
renren-fast-vue前端魔改
vue-devtools-6.0.0_beta_21
01-13
6. **浏览器兼容性**：提到的两个文件名，`vue-devtools-6.0.0_beta_21-360等.crx` 是 Chrome 插件的扩展文件，可以直接在360等支持CRX格式的浏览器上安装。而 `devtools-6.0.0_beta_21-chrome.zip` 是用于 Chrome ...
vue-devtools_vue-devtools官网_vuedevtoolschrome_vue-devtools_
10-03
8. **Vue实例的警告与错误**：当Vue应用出现警告或错误时，Vue Devtools会在“Console”面板中显示，便于开发者及时发现和解决问题。 9. **时间旅行调试**：在Vuex中，Vue Devtools允许你回放或快进state的变化，这...
traneous non-props attributes (ref_key) were passed to component but could not be automatically inhe
蜗牛~~
05-11 293
你可以选择重新安装vue3，或降低element-ui版本，建议是升级vue3版本。一般是vue版本和element-plus版本不兼容导致的。vue3中使用element-plus时报错。然后重启项目就好了。
【vue警告】[Vue warn]: Extraneous non-props attributes (class) were passed to component but could
周金鱼啊
11-23 6822
[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
vue控制台报错Extraneous non-props attributes (class) were passed to component but could not be automatica
热门推荐
Ama_Lee的博客
04-03 6万+
完整报错信息 Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 报错翻译 无关的非道具属性(类)被传递给组件，但不能被自动继承，因为组件呈现片段或文本根节点。 存在的问题 根据报错信息 首先检查是否传递了没有解析的属性，可以检查一下你用的第
vue3 - Extraneous non-props attributes (ref_key) were passed to component but could not be automatic
最新发布
高级前端工程师
01-11 2493
vue3，报错，浏览器控制台报错，vue3报Extraneous non-props attributes (ref_key) were passed错误，vue3 element-plus plus:Extraneous non-props attributes (ref_key) were passed to component，vue3如何解决报错，vue3报错怎么办，如何处理vue3控制台报错，vue3报错怎么解决，详细解决教程，【vue警告】[Vue warn]，vue3+element plus
Vue3报错：Extraneous non-props attributes (style) were passed to component but could not be automatical
海风依旧
11-30 1万+
Vue3报错：Extraneous non-props attributes (style) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
关于uniapp报警告Extraneous non-props attributes (info) were passed to component
打不死的小五
08-28 1555
这次也是个低级错误，嘲笑我吧
初学vue3与ts：element-plus的警告(Extraneous non-props attributes (ref_key) ...)
空&白的博客
12-05 497
国内镜像站点如果进不去的话，在element-plus官网最下面的链接->国内镜像站点，点击即可。原来是vue3的版本与element-plus的兼容性问题，更新下vue3的版本即可。用了vue3与ts，ui我就选了element-plus。按照官网的安装引导，突然用到某些组件会提示警告。更新后，编辑器重启，在运行下就可以了。
【难得偷闲动动笔】开发问题记录（二）：Extraneous non-props attributes
qweasdzxcertdfgcvb的博客
02-09 4896
1.今天在用vue3时，遇到了一个警告： Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 问题的原因是因为传递了没有解析定义的属性，一般情况下是class。 经过检查果然是class没有定义 收工 ...
Vue3 网页版报错或警告集锦（一）
yuanyuan1995的博客
07-21 1304
Extraneous non-props attributes (class) were passed to component Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes
Extraneous non-props attributes (draggable) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
06-10
该警告信息通常出现在使用 Vue.js 开发时，当您将某些非 prop 属性传递给组件时，但是组件渲染的是片段或文本根节点时会出现。这是因为 Vue.js 在 2.4.0 版本中引入了一个新特性——组件的根节点可以是一个片段或文本节点。 解决该警告信息的方法有两种： 1. 如果您传递的属性确实是组件支持的 prop 属性，那么您可以将这些属性转移到一个包含在组件中的元素上，并使用 v-bind 将其绑定到组件上。例如： ```html <template> <div class="my-component" v-bind="$attrs"> ... </div> </template> ``` 2. 如果您传递的属性不是组件支持的 prop 属性，那么您可以使用 v-bind="$attrs" 来将这些属性传递给父组件，例如： ```html <my-component v-bind="$attrs"></my-component> ``` 然后在父组件中使用 v-bind="$attrs" 将这些属性传递给子组件。 需要注意的是，第二种方法可能会将一些不必要的属性传递给子组件，因此应谨慎使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值