vue3 Extraneous non-props attributes (modelValue) were passed to component but could not be automati

最新推荐文章于 2024-04-15 08:52:39 发布
最新推荐文章于 2024-04-15 08:52:39 发布
阅读量7.8k 收藏
点赞数 2
文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Missying55/article/details/127732152
版权
vue3 控制台报错如下图：

在这里插入图片描述

代码书写如下

在这里插入图片描述

在这里插入图片描述

原因：

1.一个组件可能有多个根节点，请确保组件在单一根节点下
2.外部组件不要直接放在template下，最外层加div包裹
修改代码图二,将add-applicant放进right-slider组件，控制台不再报错，外层组件也可以正常加载出来，但是包裹的add-applicant组件加载不出来（此操作如果没有嵌套，修改后是可以实现的，如果有嵌套，不要做修改，请接着往下看~）

在这里插入图片描述

最后决定从根本上解决问题，也就是根组件rightSlider,加上插槽slot，组件里就能很愉快的放在外面了

在这里插入图片描述

Missying55
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
were passed to component but could not be automatically inherited because component renders fragment
11-24 3838
自定义VUE子组件需要用div包裹 <div> <selfcontrol /> </div>
vue3.X+element+cli4.0
05-07
动态路由，自定义命令，promise 封装
Extraneous non-props attributes (XXX) were passed to component but could not be automatically
qq_26905813的博客
11-01 9446
就是你有需要传输一个prop属性的数据给子组件，但是你在子组件中忘记用defineProps接收，无意中触发了透传 Attributes，在使用setup语法糖的情况下注意使用defineProps接收props属性数据。你确确实实需要传递一个非prop属性数据到子组件中，但子组件中存在多个根节点，你可以在该根节点使用v-bind=”$attrs"进行显式绑定，就可以避免报错了。就是你不需要传输一个prop属性的数据给子组件，但是你在整理代码时，忘记将父组件的子组件标签中的:xxx=“xxx"删除。
Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
最新发布
宁波阿成的博客
04-15 513
Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
[Vue warn]: Extraneous non-props attributes (style) were passed to component but could not be 警告
choose_Mings的博客
04-29 2651
使用vue3的时候莫名出现了这个警告，但是不影响使用，原因是template标签下的代码还需要一层标签包裹。 问题代码： <template> <div class="">任务管理</div> <div class="">任务管理</div> <div class="">任务管理</div> </template> 解决： <template> <div clas..
Vue3报错Extraneous non-props attributes (xxx) were passed to component but could not be ...
DM_Cxx的博客
06-09 1万+
今天在重构项目时遇到一个报错，趁有时间整理学习理解一下。首先的话这不是什么特别严重的报错。赶时间的朋友可以直接滑到最下面看解决办法。
【vue警告】[Vue warn]: Extraneous non-props attributes (class) were passed to component but could
周金鱼啊
11-23 5504
[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-count-to:vue-countTo的改造版本，支持 vue 2.0、3.0 版本
04-30
vue3-count-to基于 vue-count-to 升级改造预览目的由于原有作者好像没打算升级版本，故而自己升级维护一下。兼容当前版本同时兼容 vue2、vue3，亦能在ts下使用运行环境已经测试的运行环境，vite建议使用2.0+，...
vue-cli-plugin-component-创建组件的Vue CLI 3插件-Vue.js开发
05-27
vue-cli项目的vue-cli-plugin-component组件插件│README.md│LICENSE（可选）└───src│├──index.js│└───components│vue-cli-plugin-component组件vue-cli项目的插件│README.md│LICENSE（可选）└─...
vue3-json-schema-form:基于jsonschema的vue3表单生成器
05-23
vue3-json-schema-form a form generator based on jsonschema for vue3 Project setup npm install npm run serve npm run build npm run test:unit npm run lint API 设计 value={value} xss=removed locale={...
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
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.
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-emits event listeners (XXX) were passed to component but could not be automatic
qq_41974199的博客
07-26 1万+
之所以出现这个警告，是因为在子组件向父组件发送自定义事件的时候，没有使用“emits”选项声明它。这里使用两种方式改正emits选项。
Vue3 Extraneous non-props attributes (id) were passed to component but could not be automatically
star星辉的博客
03-15 1万+
Vue3 Extraneous non-props attributes (id) were passed to component but could not be automatically 警告解决
Extraneous non-props attributes (Allvalue, List, PopupViewinput, PopupView) were passed to componen
regretTAT的博客
07-04 257
结算方案： 再包一层div就行了。Vue3使用组件警告。
解决 Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
12-08 1526
在使用 Vue 3 中的 组件时，尝试传递非 props 属性（如 mode）可能导致组件报错。本文将探讨出现这个问题的原因，并提供了多种解决方案，包括移除不必要的属性、全局配置、使用 组件等。同时介绍了 Vue 3 过渡系统的改变以及避免类似问题的建议，旨在帮助开发者更好地使用 Vue 3 的过渡功能。
[vue3.x]实战问题--Extraneous non-props attributes
前端
08-12 2万+
这里写自定义目录标题欢迎使用Markdown编辑器 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片
重学vue之Non-Props属性
qq_45549336的博客
12-10 661
说明 就是说在父组件中给子组件传递值，但是子组件不在prop中接受 案例 父组件中 <template> <div> <child oldMsg="hello" oldMsg1="hello1" /> </div> </template> 子组件中只有一个div时候 <template> <!-- 自动获取全部属性 --> <div>child
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" 将这些属性传递给子组件。 需要注意的是，第二种方法可能会将一些不必要的属性传递给子组件，因此应谨慎使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值