vue中 style 中scoped的说明

通俗来讲，在vue文件的style中加上scope关键字，可以保障此文件中的css样式只在此文件内生效，即便是class类名相同。就是不会作用于子组件中与父组件相同类名元素。

还有一种例外的情况，就是即使加上了scoped，子组件的根元素样式，会受父组件与子组件共同影响，比如，我在父组件设置.content {color: red},如果子组件的根元素也是class='content'，那么子组件的content元素上也会有样式 color: red;

Vue Loader里面有一句使用scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式

最后如果在有scoped的基础上，希望css样式渗透到子组件，可以给样式前加/deep/ 即可

综上所述，只要保证每个组件的根元素类名不一样，就不会产生css的渗透，一般可以把组件名作为每个组件的根class类名。