通俗来讲，在
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类名。
vue中 style 中scoped的说明
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 一个web应用是离不开html、css与js，其中css充斥的整个web项目中。css它有一个特定，它是全局的。这...
