vue – 深入理解vue中的scoped属性

大家好，欢迎来到IT知识分享网。

1，前言

我们知道vue为了防止css样式污染，在每个组件中提供了 scoped属性进行限定css作用域；
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

2，scoped原理

1， vue中的 scoped 属性，其实就是给每一个dom节点元素都添加了不重复的自定义属性（如：data-v-6810cbe5）；
2，然后编译时再给样式的末尾添加属性选择器进行样式私有化（如.btn[data-v-6810cbe5]）；
如下：

转译前的代码：

btn组件（使用了Vant组件库的button组件）：

<template> <div class="copy1"> <van-button type="default">默认按钮</van-button> </div> </template> <style scoped lang="scss"> .van-button { 
    background-color: red; } </style> 

浏览器编辑的结果如下：

可以看到，van-button类名后面添加了[data-v-03f66e5f];他的节点上面也自动添加了自定义属性 data-v-03f66e5f；
所以：就算在两个互不相关的组件使用同样的类名，他们的样式也是互不影响的；

3，父子组件使用scoped的不同情况

scoped的这一操作，虽然达到了组件样式模块化的目的，但是会出现无论父组件样式的权重有多大，也可能无法修改子组件的样式；

下面就分四种情况具体说明scoped的作用：

4，第一种：父组件未添加scoped，子组件未添加scoped

这是最原始的一种情况，可以看到按钮的背景颜色为蓝色。此时父组件声明了background-color: blue;,子组件声明了background-color: red,权重是一样的，但是父组件style会覆盖子组件的style;
查看Elements后会发现，父组件的样式文件插入位置在子组件样式文件后面(上图可以看出一个是第9行一个是第90行)，对于权重相同的样式，后面的会覆盖前面，所以父组件的style生效。

5，第二种：父组件未添加scoped，子组件添加scoped

子组件：btn.vue

<template> <div class="copy1"> <van-button type="default">默认按钮</van-button> </div> </template> <style lang="scss" scoped> .van-button { 
    background-color: red; } </style> 

我们可以看到子组件的.van-button{background-color: red};被编译成.van-button[data-v-03f66e5f]{background-color: red}；
子组件中button样式的权重=类选择器(.button)+属性选择器([data-v-03f66e5f])，而父组件中button样式的权重=类选择器(.button)，所以子组件样式的权重加重了，覆盖本来能产生作用的父组件样式，导致按钮背景颜色为红色。

6，第三种：父组件添加scoped，子组件未添加scoped

父组件：

<template> <div> <!-- 使用子组件 --> <div class="scoped1"> <btn></btn> </div> </div> </template> <script> //引入 import Btn from './copy1/index.vue'; export default { 
    name: 'copy', components: { 
    Btn, }, }; </script> <style lang="scss" scoped> .scoped1 { 
    .van-button { 
    background-color: blue; } } <style> 

子组件：btn.vue

<template> <div class="copy1"> <van-button type="default">默认按钮</van-button> </div> </template> <style lang="scss"> .van-button { 
    background-color: red; } </style> 

我们可以看到按钮的背景颜色为红色，父组件style添加scoped后，所有元素都加上data-v属性，包括子组件的根节点，但是子组件的内层元素就不会受影响，所以父组件的.van-button[data-v-ae1b895c] {background-color:blue;}作用不到子组件的.van-button上。

这也是直接修改element-ui或vant-ui子组件的样式不生效的原因，就算要写，也需要借助深度作用选择器或样式不写在scoped属性中。

注意：

如果只修改子组件根节点的样式，还是可以写到父组件的scoped CSS里面，因为一个子组件的根节点会同时存在 两个data-v属性的，一个是父组件本来的，另一个是子组件根节点上面的；（见上图左边部分）；所以也会影响到子组件的根节点元素；

7，第四种：父组件添加scoped，子组件也添加scoped

效果图如下：

我们可以看到，子组件的根节点不仅有子组件的data-v属性，还有父组件的data-v属性。而.van-button元素依然不受父组件的影响，只拥有自己组件的data-v属性，所以按钮颜色依旧为红色。
这和上面第三种的情况是一样的；如法直接覆盖子组件的样式；

8，解决方案

那如果我就是想让父组件的样式覆盖子组件的样式，怎么办呢？

1，第一种使用两个style，一个用于私有样式（加scoped），一个用于共有样式。

<style lang="scss" scoped> .van-button { 
    .... } // 公共样式 <style lang="scss" > .van-button { 
    background-color: blue; } 

2，深度作用选择器

父元素使用 /deep/ 或 >>>进行穿透

<style lang="scss" scoped> /deep/ .scoped1 { 
    .van-button { 
    background-color: blue; } 编译如下： [data-v-ae1b895c] .scoped1 .van-button { 
    background-color: blue; } } <style> 

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

推荐使用 /deep/ 简单方便；

9，总结

END；

文章参考来自掘金喂。小欢：https://juejin.cn/post/