修改vue组件中的样式

使用VUE组件时，有时候我们会修改组件的样式，比如修改颜色的等

最近项目使用react发现，react的组件可以在父组件里面修改其样式，vue文档里面是这样说的（Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。），所以当修改vue组件样式就需要用以下方法了

1、混合使用全局属性和局部属性

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

修改组件的样式写在 /* global styles */ 里面，缺点就是样式变成全局样式，会修改整个项目里面的样式 ，
优化后方法

<style scoped>
/* local styles */
.example {
  color: red;
}
</style>
<style>
	/* global styles */
	.header > div{
	  color: red;
	}
</style>
<template>
  <div class="example">
	<Header class=‘header’></Header>	
  </div>
</template>

给组件一个class ，然后通过修改class里面的样式修改全局样式，减少全局样式污染

2、深选择器

如果想对设置了scoped的子组件里的元素进行控制可以使用 ’>>>’ 或者 ’deep’

<template>
  <div id="app">
    <Header></Header>
  </div>
</template>

<style lang="css" scoped>
  .Header /deep/ .name{ //第一种写法
    color:red;
  }
  .Header >>> .name{   //二种写法
    color:red;
  }
</style>

<div class="Header">
  <div class="name"></div>
</div>

一些预处理程序，例如sass不能解析>>>属性，这种情况下可以用deep，它是>>>的别名，工作原理相同。

快过年了，还在上班，看着别人都回去了，老板不给请假，心里一万个草泥马跑过。。。。。。。。。。