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

Pastore Antonio | 28 10 月, 2023

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

浏览量： 83