Vue 组件之间样式冲突

vue 组件化，各组件内都可以在 style 部分写样式，这些样式却不是相互独立的，最终组合在一起，难免就会产生样式的污染。

首先来看一下两个 vue 组件代码：

1.ParentTestStyle.vue

import childStyle from "./ChildTestStyle";

export default {

components: { childStyle },

name: "ParentStyle",

data() {

return {};

}

};

.testStyle {

background-color: blue;

width: 300px;

height: 100px;

font-size: 20px;

color: white;

line-height: 100px;

margin: 10px;

}

.ParentDIV {

background-color: darkgreen;

width: 300px;

height: 100px;

line-height: 100px;

margin: 10px;

font-size: 20px;

color: white;

}

2.ChildTestStyle.vue

export default {

name: "ChildStyle",

data() {

return {};

}

};

.testStyle {

background-color: red;

width: 300px;

height: 100px;

font-size: 20px;

color: white;

line-height: 100px;

margin: 10px;

}

.ChildDIV {

background-color: blueviolet;

width: 300px;

height: 100px;

line-height: 100px;

margin: 10px;

font-size: 20px;

color: white;

}

页面样式渲染效果如下：

001.png

结果分析：

该示例中

“testParentStyle”控件的样式并不是显示本组件内的样式.testStyle 中定义的背景蓝色，而是显示引用的子组件中的样式.testStyle 中定义的背景红色；

003.png

父组件中“污染控件”在本组件内并没有定义样式，而是引用了子组件中定义的样式.ChildDIV，结果也能按照子组件的样式定义进行显示；同样的，子组件中“污染控件”显示的是父组件中定义的样式。

004.png

这就能说明，两组件之间的样式不是完全隔离的，是存在相互冲突及污染的可能的。

为了保持组件样式的隔离独立性，VUE 中的 style 有一个 scoped 属性：

下面我们把这个属性给两个组件的样式定义中添加上看一下效果。

父组件样式修改如下：

.testStyle {

background-color: blue;

width: 300px;

height: 100px;

font-size: 20px;

color: white;

line-height: 100px;

margin: 10px;

}

.ParentDIV {

background-color: darkgreen;

width: 300px;

height: 100px;

line-height: 100px;

margin: 10px;

font-size: 20px;

color: white;

}

子组件样式修改类似。

页面效果：

005.png

通过观察对比，各组件的样式保持了隔离独立。

006.png

如图：样式中都会有一个特殊的 data id 标记将组件的样式私有化，scoped 域隔离。

据说，增加 scoped 子组件依然会继承父组件中的样式，进而造成 css 冲突污染，但是我测试发现不存在该问题。scoped 能够将各组件的样式锁定在组件内。

总结：

为了避免 vue 组件样式冲突污染，在设计组件样式的时候，尽量有一个全局观，定义样式类名等尽量命名规范化，防止造成命名一致进而相互影响。如果，需要完全隔离自定义专属样式，就使用 style 的 scoped 属性。

测试运行环境：

"dependencies": {

"vue": "^2.5.2",

"vue-resource": "^1.5.1",

"vue-router": "^3.0.1"

},

"engines": {

"node": ">= 6.0.0",

"npm": ">= 3.0.0"

},

"browserslist": [

"> 1%",

"last 2 versions",

"not ie <= 8"

]