深入理解 Vue Scope CSS 以及深度作用選擇器

當 style 標籤有 scoped 屬性時，它的 CSS 只作用於當前組件中的元素。編譯後代碼如下：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

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

原理是使用 css 的屬性選擇器，在標籤上設置了 data-v-xxx 屬性，然後 .classname[data-v-xxx] 找到對應樣式。

子組件

使用 scoped 後，父組件的樣式將不會滲透到子組件中。不過一個子組件的根節點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設計是爲了讓父組件可以從佈局的角度出發，調整其子組件根元素的樣式。

編譯後 classname 添加了當前組件的選擇器，導致組件內獲取不到樣式。

深度作用選擇器

使用 lang="scss" 的嵌套語法編譯結果：

如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> /deep/ ::v-deep 操作符，scope 會添加到操作符的上一個節點，這樣下層就能獲取到樣式。

whosmeya.com