首先大致解释一下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命名规范的效果，比较推荐使用这种方法）