Vue 组件之间样式冲突

Vue 组件之间样式冲突

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

2.ChildTestStyle.vue

页面样式渲染效果如下：

001.png

结果分析：

该示例中

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

   
   
   

   003.png

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

   
   
   

   004.png

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

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

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

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