Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical

这篇具有很好参考价值的文章主要介绍了Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

翻译是:无关的非道具属性(样式)被传递给组件,但由于组件呈现片段或文本根节点而无法自动继承。

出现这个错误的原因是在组件的节点上添加了样式,也就是

<组件 style='display:none'></组件>

我本来的思路是想让这个组件隐藏起来的,但这样行不通

所以解决办法就是在组件外套一层div,即文章来源地址https://www.toymoban.com/news/detail-582125.html

<div style='display:none'>
	<组件></组件>
</div>

到了这里,关于Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3报错 Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)

    eslint校验报这个错,其实是Vue的 单向数据流的概念,因为识别到子组件中修改了props值 。 我这里踩到这个坑是这么操作的,我在父组件中给子组件传了个值,然后再子组件中v-modle这个值,于是就给我报了这个错! 复现场景如下: 父组件中 子组件中 报错就在 v-model=\\\"student

    2024年02月16日
    浏览(35)
  • 当vue3 报错 Cannot read properties of null (reading ‘style‘)

    当你在编写代码时 发现页面不及时刷新了 浏览器控制台报下面的错误 时刚看到的时候会一很懵 那么原因是什么呢 原因是:尽管Vue 3允许一个组件模板中存在多个元素,但是如果你这样写,有时会出现上述错误。 解决方法:在模板内你写的多个标签外面包裹一层元素,或者

    2024年02月12日
    浏览(40)
  • vue3报错:runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop “modelVal

    🔥🔥🔥 欢迎关注csdn前端领域博主: 前端小王hs 🔥🔥🔥 email: 337674757@qq.com 🔥🔥🔥 前端交流群: 598778642 vue3报错:runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop “modelValue”. Expected Boolean, got Object at 警告的大意是绑定的函数期待得到的是布尔值,但得到

    2023年04月08日
    浏览(38)
  • 成功解决failed: The TLS connection was non-properly terminated

    代理搞的鬼: 清掉git代理 第一步:查看git用代理了没 第二步:有的话清除掉 git config --global --unset http.proxy git config --global --unset https.proxy 清除掉系统代理 第一步:查看电脑环境代理问题 git config --global -l 第二步:有的话清楚掉,有啥清啥。一定要清干净。 unset http_proxy uns

    2024年02月01日
    浏览(41)
  • GnuTLS recv error (-110): The TLS connection was non-properly terminated

    在 git clone命令 运行过程中报错: GnuTLS recv error (-110): The TLS connection was non-properly terminated 网络代理问题,主要是网络问题大家都懂。。 取消代理即可恢复正常,执行下面的命令即可 完美解决

    2024年02月12日
    浏览(31)
  • Vue3 - props

    props 用于接收父组件传递的值 在使用 script setup 的单文件组件中,props 可以使用 defineProps() 宏来声明: 在没有使用 script setup 的组件中,prop 可以使用 props 选项来声明(和vue2一致): 传递给 defineProps() 的参数和提供给 props 选项的值是相同的,两种声明方式背后其实使用的都

    2024年02月05日
    浏览(62)
  • vue3中的Props

    一个组件需要显示声明它所接受的props,这样vue才能知道外部传入的哪些是props,哪些是透传attribute 在使 script setup 的单文件中,props可以使用 ==defineProps()==宏来声明: 在没有使用 script setup 的组件中,prop可以使用props选项来声明: 注意传递给 defineProps 的参数和提供给props选项

    2024年02月08日
    浏览(31)
  • 【vue3】vue3接收props以及emit的用法

    技术 :vue3.2.40 UI框架 :arco-design 2.44.7 css技术 :less 4.1.3 实现 :子组件接收props以及通过emit方法传值父组件 vue3使用的组合式API,我这里使用的是defineComponent 1.setup里如果需要接收props和使用emit,只需要带参数 setup(props, { emit }) 2.setup里面只需要带emit(‘handleCancel’),不需要带

    2024年02月15日
    浏览(26)
  • 【亲测有效】GnuTLS recv error (-110): The TLS connection was non-properly terminated.

    fatal: unable to access ‘https://github.com/openai/CLIP.git/’: GnuTLS recv error (-110): The TLS connection was non-properly terminated. 如图: 如果设置了代理则可能会出现类似下面的错误: git下载出现:Failed to connect to 127.0.0.1 port 1080: Connection refused拒绝连接错误 通过git的配置文件查看有无使用代理

    2024年02月16日
    浏览(80)
  • vue3 监听props 的变化

    再三说明 仅仅个人学习用,不误导别人 我觉得props 会创建对应的属性,去接受这些值,比如传递一个ref的基本值 age props.age = age.value 传递一个ref的引用值 person props.person= person.value 传递一个reactive的引用值 person props.person= person 最开始时候,props指向了一个响应式的reactive pe

    2024年02月11日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包