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

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后样式不起作用了,可以的话点个赞让更多的人看到,有什么不理解的可以评论,博主会及时回复的!!我们下篇再见!!

  • 50
    点赞
  • 76
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhangpaopao0609

看星空看日落不如看我的眼眸

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值