Logo

深度解析为什么vue组件中添加scoped后某些样式不生效?给出解决办法

photo

2023年10月28日

1 简述

博主近期使用 VUE 时写发现某些样式不生效,怎么都不生效, 不过将style 中的 scoped 去掉后,居然生效了,那么出现样式不生效的原因肯定就是 scoped 捣的鬼,在仔细研究过后得出了一些结论,包括为什么会出现这种情况和解决办法,在此分享。

2 深度解析

为了便于展示和理解,博主在这里选择了一父组件和一子组件,
父组件: 首先,父组件引入子组件TestScoped

<template>
  <div class="parent">
    <p>Here is parent component</p>
    <TestScoped />  
  </div>
</template>
<style>
.parent {
  color: deepskyblue;
}
</style>

子组件: TestScoped

<template>
  <div class="son">
    <p>Here is son component</p>
  </div>
</template>

2.1 不添加 scoped

此时的HTML编译后的结果是:

<div class="parent">
    <p>Here is parent component</p>
    <div class="son">
        <p>Here is son component</p>
    </div>
</div>

没错,是我们所理解的样子,这时候因为在父组件中添加了如是的样式,那么肯定子组件的Here is son component也带有这个样式,结果的确是这样。

<style>
p {
  color: deepskyblue;
}
</style>

渲染后的结果。

 

2.2 添加 scoped

也就是在父组件的style中添加scoped

<style scoped>
.p {
  color: deepskyblue;
}
</style>

此时的HTML编译后的结果是:

<div data-v-7ba5bd90 class="parent">
    <p data-v-7ba5bd90>Here is parent component</p>
    <div data-v-7ba5bd90 class="son">
        <p>Here is son component</p>
    </div>
</div>

此时的编译结果也能够理解,也就是 vue 给父组件的每一个标签自动添加一个唯一的 attribute, 这里 注意,你会发现vue给子组件的根标签也打上了这一个唯一的attribute, 但是子组件的其他标签却没有打上。

编译后会发现,添加的css样式变成了如下:添加了唯一的标签,这也就是vue scoped 实现样式隔离的原理

p[data-v-7ba5bd90] {
    color: deepskyblue;
}

由于子组件中除根标签以为其他都未打上父组件的唯一标签,那么可想而知,样式不会在子组件中生效,结果的确如此。

总结: 为什么vue组件中添加scoped后某些样式不生效?
原因: vue的scoped为本组件的所有标签都打上了一个唯一attribute,样式生效时也带上了这唯一的attribute,但是本组件应用的所有子组件,除根标签以为其他都未打上这唯一标签,因此样式自然不会生效。

3 解决办法
3.1 官方解决办法

点击查看官方解决办法
vue给出的解决办法是: 深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。

通常我们会选择/deep/,使用方式如下,在需要子组件样式生效的地方加上/deep/

<style scoped>
/deep/p{
  color: deepskyblue;
}
</style>

此时HTML编译结果不会改变,只是样式的生效方式不同了,变成了如下:

[data-v-7ba5bd90] p {
    color: deepskyblue;
}

这样便使得css生效

 

3.2 博主选择的解决办法

博主一般不会使用/deep/,因为嫌麻烦,每一个要用的地方都得写,因此,博主的选择是采用两个style,其中一个添加scoped,写组内的样式,另一个不添加,修改子组件的样式

<style scoped>
p{
  color: deepskyblue;
}
</style>

<style>

</style>

相信只要你看完这篇博文,你肯定能够完全理解为什么scoped后样式不起作用了,可以的话点个赞让更多的人看到,有什么不理解的可以评论,博主会及时回复的!!我们下篇再见!!

转载自: https://blog.csdn.net/qq_41800366/article/details/107062781

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
本文为原创文章,请注意保留出处!

热门文章

修复群晖Synology Drive client右键菜单缺失问题 本教程主要解决windows10右键菜单中没有SynologyDrive菜单的问题,整体思路是找到...修复群晖SynologyDriveclient右键菜单缺失问题 作者:Pastore Antonio
1973 浏览量
docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 前言:有时候我们会在docker上下载一个镜像,或者是上传一个镜像到docker上,甚至有时候就是在...docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 作者:Pastore Antonio
1918 浏览量
Adobe Acrobat Pro 激活 这里记录了一些AdobeAcrobat的激活教程和组件。浏览量:1,799 作者:Pastore Antonio
1642 浏览量
追寻日出,找回自己 为什么我要去追寻日出?其实我是一个很懒的人,每次都起不来,直到有一次我在租房中睡到了大天亮,阳光照...追寻日出,找回自己 作者:Pastore Antonio
1606 浏览量
Swagger2 接口多级分组方法 swagger无疑是Java开发的最佳伴侣,接口非常方便调试;当然也有用Postman,因人而异吧...Swagger2接口多级分组方法 作者:Pastore Antonio
1522 浏览量