首先大致解释一下scoped原理
scoped原理
通过观察DOM结构可以发现：vue通过在DOM结构以及css样式上加上唯一的标记，保证唯一，达到样式私有化，不污染全局的作用。
如图，样式上也会多一个该字符[data-v-14df2d4a]，以保证唯一。
DOM结构添加新的属性
样式表添加属性选择器
这样子的作用就是父子组件也许都用到了同一个class名。
但是子组件中dom有标记属性[data-v-14df2d4a]，并且子组件的样式表只作用到class选择器选择到的也拥有data-v-14df2d4a属性的dom节点。
（也就是子组件的样式不会作用到父组件中虽然class相同，但是没有拥有这个属性的dom节点）。
那为什么修改了外部组件库（如iview）中组件的样式不起作用呢？
如图可以看到，引入的组件没有添加上文中提到的作为标记的属性[data-v-14df2d4a]。
但是你写在带scoped的<style>中的样式选择器会被添加标记的属性。
所以作用不到组件。
image.png
解决方法是：
1、使用深度选择器/deep/,>>>
2、不使用scoped。（在平时的开发中，使用css预编译来达到使用BEM命名规范的效果，比较推荐使用这种方法）
网友评论