Vue 组件之间样式冲突

Vue 组件之间样式冲突

vue 组件化，各组件内都可以在 style 部分写样式，这些样式却不是相互独立的，最终组合在一起，难免就会产生样式的污染。
首先来看一下两个 vue 组件代码：
1.ParentTestStyle.vue

<template>
  <div>
    <div style="text-align:left">父组件控件：</div>
    <div class="testStyle">testParentStyle</div>
    <div class="ChildDIV">样式穿透</div>
    <div style="text-align:left">子组件控件：</div>
    <childStyle></childStyle>
  </div>
</template>
<script>
import childStyle from "./ChildTestStyle";
export default {
  components: { childStyle },
  name: "ParentStyle",
  data() {
    return {};
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.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;
}
</style>

2.ChildTestStyle.vue

<template>
  <div>
    <div class="testStyle">testChildStyle</div>
    <div class="ParentDIV">样式穿透</div>
  </div>
</template>
<script>
export default {
  name: "ChildStyle",
  data() {
    return {};
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.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;
}
</style>

页面样式渲染效果如下：

001.png

结果分析：

该示例中

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

   
   003.png

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

   
   004.png

这就能说明，两组件之间的样式不是完全隔离的，是存在相互冲突及污染的可能的。
为了保持组件样式的隔离独立性，VUE 中的 style 有一个 scoped 属性：

<style scoped>

</style>

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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;
}
</style>

子组件样式修改类似。
页面效果：

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"
  ]