vue的style样式标签中使用 scoped

scoped：字面意思是范围，也就是说该样式只能应用在此文件的范围内生效。

加上 scoped 在默认情况下该模块中的样式只在当前模块中生效，不会对该模块中的子模块的样式造成影响，他的原理是通过编译给每个css选择器dom元素添加唯一的属性，然后再通过css的属性选择器来实现；例如：

<!--About.vue-->
<template>
  <div class="about">
    <h4>about page</h4>
    <detail />
  </div>
</template>

<script>
  import detail from '@/components/Detail';
  export default {
    components:{
      detail
    }
  }
</script>

<style scoped>
    .about h4{
        color:#f00;
        font-size: 30px;
    }
    .about p{
        color: orange;
    }
</style>

<!--Detail.vue-->
<template>
    <div class="detail">
        <h4>这是详细内容</h4>
        <p>这是p标签文字</p>
    </div>
</template>

<script>
    export default {

    }
</script>

在上边的代码中通过设置.about h4样式，在detail.vue中的h4并不能应用该样式，编译后会生成如下代码：

<!--html代码部分-->
<div data-v-039c5b43 class="about">
    <h4 data-v-039c5b43>about page</h4>
    <div data-v-039c5b43 class="detail">
        <h4>
          这是详细内容
        </h4>
        <p>这是p标签文字</p>
    </div>
</div>
<!--css代码部分-->
<style>
.about h4[data-v-039c5b43]{
    color:#f00;
    font-size: 30px;
}
.about p[data-v-039c5b43]{
    color: orange;
}
</style>

通过上边代码可以看出，编译后的样式因为添加了属性选择器所以只会在当前模块中生效。

但是当我们使用一些前端ui组件的时候，有时候想要更改子组件内部的样式，这种情况下我们可以有两种实现方式：

第一种：把style中的scoped关键字去掉，这样编译出来的样式不会额外增加属性，但是这种有一个弊端，因为是非局部的样式会污染全局，所以我们需要给最外层元素增加唯一的样式来实现。这里和我们以前写样式一样，这里就不在贴代码了。
第二种：在不去掉scoped关键字的基础上增加 >>>|/deep/|::v-deep，还是上边的代码：

.about >>> p{
    color: green;
}
/*或者*/
.about /deep/ p{
    color: green;
}
/*或者*/
.about ::v-deep p{
    color: green;
}

通过这种三种方式编译出来的结果为：

.about[data-v-039c5b43] p {
    color: green;
}

可以看出关键字以后的所有选择器都不在添加特定的属性，这样以来就可以单独操作子组件的样式。

关于上边三种方式的使用说明：

1. >>>：适合用于css和stylus定义的样式；
2. /deep/：适合用于 css、stylus、less定义的样式；
3. ::v-deep适合用于css、scss、less、stylus定义的样式；