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/或者 >>>
以上是 vue组件中style的属性scoped 的全部内容， 来源链接： utcz.com/z/377200.html
