scoped屬性

眾所周知，在vue中我們在style標籤中寫樣式時，為了防止當前元件或頁面的樣式對外界其它的頁面元件造成影響，會給vue中的 style標籤 加上 scoped 屬性，該屬性使樣式變成了局域樣式，只作用於當前元件。vue中的scoped屬性的設計思想就是讓當前元件的樣式不會修改到其它 地方的樣式。

原理

通過觀察頁面的DOM發現：vue中的scoped屬性給相應的DOM結構和CSS選擇器都加上了標識，這個唯一的標記保證了唯一性，從而達到了樣式的 私有化，不會汙染全域性的作用。這個標識就是給標籤新增上一個 [data-v-hash] 的屬性。

需要注意的是，如果當父元件、子元件同時使用 scoped 屬性時，子元件最外層的標籤會被加上當前元件的hash值，同時也會被加上父元件的hash 值。

同樣的CSS樣式部分的選擇器也會被加上這個標識屬性。
總結vue中的scoped屬性實現樣式私有化：

• 給相應的HTML的DOM元素新增一個 [data-v-hash] 屬性的唯一標識。
• 給相應的DOM元素的樣式選擇器新增一個與標籤相同的 [data-v-hash] 屬性標識。
• 如果父子元件的style標籤都有scoped屬性時，子元件最外層的標籤會同時有父元件和子元件的 [data-v-hash] 的屬性標識
• 如果元件中還有元件(沒有scoped屬性)或者第三方元件時，只會給最外層的元件裡的標籤加上 [data-v-hash] 的屬性標識，對元件內部的元件不影響。

深度選擇器

在vue中，為了不讓當前元件的樣式修改其它地方的樣式，就有了scoped屬性。但有時候不想用預設的樣式，需要自定義自己的樣式時，比如：引用的第三方元件庫, 同時還不想去除scoped屬性，避免汙染全域性，可以選擇使用深度選擇器。 在vue中，可以使用深度選擇器 >>> 來穿透scoped，來修改樣式，但是像 sass 之類的預處理語言無法正確解析 >>>，可以使用 /deep/ 操作符(>>> 的別名) 來實現同樣的效果。

        <script scoped>
                外層類名 >>> 第三方元件類名{

                }
              </script>
      

        <script scoped>
                外層類名 /deep/ 第三方元件類名{

                }
              </script>