欢迎来到站圈网!

php远程媒体七牛node摇摇

投稿中心

JavaScript

当前位置: 主页 > Web前端 > JavaScript

Vue3中样式渗透:deep()无效的原因分析

时间:2022-11-22|作者:蒲公英1001|点击:

今天学习 /deep/ 样式穿透,因为vue3中已经使用:deep()取代了/deep/ ,所以直接用:deep()练习。

:deep()的使用场景:

如果给当前组件的style 节点添加了scoped 属性,则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效,则需要使用:deep()。

我原本觉得这个没有难度,于是写了个案例来验证。然后问题出现了,:deep()定义的样式在子组件中不起作用。
我开始找错,把包括冒号、括号在内的语法格式等都检查了一遍,发现语法格式没有问题,控制台也不报错,但是:deep()格式的样式在子组件中就是无效。
幸好我这儿有一个:deep()格式起作用的范例,没办法,只好把两个文件中的父组件、子组件逐一比对,前后费了不少时间,终于找到了问题所在。

我在前面练习的时候,Vue2.X中要求元素必须在一个根节点中,Vue3.X无此要求,可以不在一个根节点中,所以为了验证这一点,我把外层的

删去了,果然不报错。

Vue3中样式渗透:deep()无效的原因分析

可是问题就出在这个根节点上,如果App.vue中没有这个根节点,那么:deep()不起作用,我把根节点加上,:deep()样式就生效了。
唉,感觉自己被这个根节点坑了一把。

1.父组件App.vue中代码


2.子组件中的代码

还有一点让我觉得新鲜,CSS中颜色的色块有两个。

Vue3中样式渗透:deep()无效的原因分析

到此这篇关于Vue3中样式渗透:deep()无效的原因分析的文章就介绍到这了,更多相关Vue样式渗透deep内容请搜索站圈网以前的文章或继续浏览下面的相关文章希望大家以后多多支持站圈网!

版权声明:本文内容由小编收集网络,均来自网络用户自发贡献,版权归原作者所有,Web前端、电脑编程学习类网站不拥有其著作权,亦不承担相应法律责任。具体规则请查看《Web前端、电脑编程学习类网站用户服务协议》和《Web前端、电脑编程学习类网站知识产权保护指引》。如果您发现本站中有涉嫌抄袭的内容,填写联系本站管理员,一经查实,管理员将立刻删除涉嫌侵权内容。

上一篇:Vue.config.productionTip = fal

下一篇:vue3+vite中使用import.meta.glob的操

本文标题:Vue3中样式渗透:deep()无效的原因分析

本文地址:https://www.zhano.cn/JavaScript/67923.html

AD300

广告投放 | 联系我们 | 版权申明 | SiteMap

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:15234109 | 邮箱:15234109#qq.com(#换成@)

Copyright © 2019-2022 豫ICP备19001789号