Vue中的scoped和scoped穿透

1.什麼是scoped

在Vue文件中的style標籤上有一個特殊的屬性，scoped。當一個style標籤擁有scoped屬性時候，它的css樣式只能用於當前的Vue組件，能夠使組件的樣式不相互污染。若是一個項目的全部style標籤都加上了scoped屬性，至關於實現了樣式的模塊化。

2.scoped的實現原理

Vue中的scoped屬性的效果主要是經過PostCss實現的。如下是轉譯前的代碼:

<style scoped lang="less">
    .example{
        color:red;
    }
</style>
<template>
    <div class="example">scoped測試案例</div>
</template>

轉譯後:

.example[data-v-5558831a] {
  color: red;
}
<template>
    <div class="example" data-v-5558831a>scoped測試案例</div>
</template>

既:PostCSS給一個組件中的全部dom添加了一個獨一無二的動態屬性，給css選擇器額外添加一個對應的屬性選擇器，來選擇組件中的dom,這種作法使得樣式只做用於含有該屬性的dom元素(組件內部的dom)。

總結：scoped的渲染規則：

1. 給HTML的dom節點添加一個不重複的data屬性(例如: data-v-5558831a)來惟一標識這個dom 元素
2. 在每句css選擇器的末尾(編譯後生成的css語句)加一個當前組件的data屬性選擇器(例如：[data-v-5558831a])來私有化樣式

3.scoped穿透

scoped看起來很好用，當時在Vue項目中，當咱們引入第三方組件庫時(如使用vue-awesome-swiper實現移動端輪播)，須要在局部組件中修改第三方組件庫的樣式，而又不想去除scoped屬性形成組件之間的樣式覆蓋。這時咱們能夠經過特殊的方式穿透scoped。

stylus的樣式穿透 使用>>>

外層 >>> 第三方組件 
        樣式
        
   .wrapper >>> .swiper-pagination-bullet-active
    background: #fff

sass和less的樣式穿透 使用/deep/

外層 /deep/ 第三方組件 {
        樣式
    }
    .wrapper /deep/ .swiper-pagination-bullet-active{
      background: #fff;
    }

3.在組件中修改第三方組件庫樣式的其它方法

上面咱們介紹了在使用scoped 屬性時，經過scopd穿透的方式修改引入第三方組件庫樣式的方法，下面咱們介紹其它方式來修改引入第三方組件庫的樣式

在vue組件中不使用scoped屬性

---

在vue組建中使用兩個style標籤，一個加上scoped屬性，一個不加scoped屬性，把須要覆蓋的css樣式寫在不加scoped屬性的style標籤裏

---

創建一個reset.css(基礎全局樣式)文件，裏面寫覆蓋的css樣式，在入口文件main.js 中引入