vue组件中style的属性scoped

style中的scoped的作用

不加scoped的效果如下：

加scoped的效果如下：

原理：根据属性选择器来确定唯一性。
作用：如果在style中添加scoped ，那么style的样式只能在当前组件内起作用，实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。

由此可知，添加scoped属性的组件，为了达到不污染全局，做了如下处理：

• 给HTML的DOM节点加一个不重复属性data-v-xxxx 标志唯一性；
• 在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段，实现类似于“作用域”的作用，不影响全局；
• 如果组件内部还有组件，只会给最外层的组件里的标签加上唯一属性字段，不影响组件内部引用的组件；

优点和缺点

• 优点：单独的组件样式不影响全局的样式；
• 缺点：假如我需要修改其中的某个样式，但是并不能修改成功，因为scoped的原理导致的；

缺点如下图：

解决方法：

1、不给style样式加scoped（没用的解决方法）
2、里面有个加scoped的style样式，再单独写了style标签，不加scoped的属性里面写修改的样式。
3、::v-deep 加改动的样式 ；注意如果用scss的话 需改为 /deep/或者 >>>