vue组件中的样式属性：scoped，解决在父组件中没法修改子组件样式问题

　　Scoped CSS规范是Web组件产生不污染其余组件，也不被其余组件污染的CSS规范。

　　vue组件中的style标签标有scoped属性时代表style里的css样式只适用于当前组件元素，它是经过使用PostCSS来改变如下内容实现的：

<style scoped> .example { color: red; } </style>

<template>
  <div class="example">hi</div>
</template>
//渲染结果
<style> .example[data-v-f3f3eg9] { color: red; } </style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

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

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

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

2、关于子组件的根元素

　　使用了scoped属性以后，父组件的style样式将不会渗透到子组件中，然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，这么设计的目的是父组件能够对子组件根元素进行布局。
　　.vue模板中的样式是根据须要按需加载，访问一个页面该组件中的样式就会追加到head标签中，若是父子组件中都对某个子组件根节点元素进行了控制，则父组件里的样式会被后来的覆盖。

3、深选择器

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

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

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

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

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

4、动态生成的内容

　　使用v-html动态建立的DOM内容，不受设置scoped的样式影响，但你依然可使用深选择器进行控制

5、vue开发中，父组件添加scoped以后。解决在父组件中没法修改子组件样式问题

　　在vue的开发中，咱们须要引用子组件，包括ui组件（element、iview）。可是在父组件中添加scoped以后，在父组件中书写子组件的样式是无效果的。去掉scoped以后，样式能够覆盖。但这样会污染全局样式，为了解决这个问题，vue-loader新增书写方式。

　　父组件

　　子组件

　　效果

　　这样的写法及修改了子组件的样式，又不会污染全局样式！