1. style的scoped屬性

scoped屬性是為了實(shí)現(xiàn)樣式隔離，使得組件之間的樣式互不影響。
現(xiàn)在我們有
組件A.vue

<template>
  <div class="wrapper">
    <el-statistic :value="output[0]" prefix="￥" />
    <div class="mt-1 title">本月銷售總額</div>
  </div>
</template>
<!-- js代碼省略，用不到 -->
<style scoped lang="scss"></style>

這個組件是一個單根組件，外層有一個div包裹，class=wrapper，內(nèi)部使用了element-plus的數(shù)據(jù)統(tǒng)計組件el-statistic。
這個組件渲染出的DOM元素如下：

可以發(fā)現(xiàn)此時，只有外層容器wrapper上有哈希值：data-v-447f2f22，實(shí)際上這個哈希值是A組件父組件的哈希值，如下：

當(dāng)前的A組件并沒有生成自己的哈希值data-v-xxx，現(xiàn)在只要我們在style內(nèi)部寫入樣式代碼，即使是注釋代碼也行，就可以生成A組件自己的哈希值。如下：

<style scoped lang="scss">
//
</style>

這時候A組件生成了自己的哈希值:data-v-d48692a9（我們暫時不考慮父組件的哈希值）?，F(xiàn)在如果我要選中wrapper容器，設(shè)置背景色，就可以有如下代碼：

<style scoped lang="scss">
//
.wrapper {
  background-color: coral;
}
</style>

實(shí)際的選擇器為：

就是把A組件自帶的哈希值data-v-d48692a9，加到了選擇器上，使用了類選擇器加上屬性選擇器，選中了wrapper容器。如果選擇內(nèi)部的元素，比如 文本 本月銷售總額，scss代碼如下：

<style scoped lang="scss">
//
.wrapper {
  background-color: coral;
  .title {
    color: red;
  }
}
</style>

對應(yīng)的DOM元素為：

實(shí)際的css選擇器為：

.wrapper .title[data-v-d48692a9] {
    color: red;
}

編譯機(jī)制解析

.wrapper .title的實(shí)際編譯結(jié)果是.wrapper .title[data-v-d48692a9]。
在Vue的scoped樣式機(jī)制處理后代選擇器時，會將data-v-*作用于選擇器的最右側(cè)部分（即目標(biāo)元素），而不是每一級都添加。不僅是目標(biāo)元素，同時還要是當(dāng)前組件內(nèi)部的元素，才會添加這個data-v-*

瀏覽器在運(yùn)行時會從右到左解析選擇器。

結(jié)合scoped編譯機(jī)制和瀏覽器匹配機(jī)制，就可以理解為為什么可以選中對應(yīng)的元素。

如果最后的目標(biāo)元素，不是當(dāng)前組件內(nèi)部的元素，比如是子組件內(nèi)部的DOM元素，則 Vue 不會為該元素附加當(dāng)前組件的 data-v-* 標(biāo)識。當(dāng)然，樣式匹配不到目標(biāo)元素。

2. :deep()

:deep() 的作用是讓特定的樣式可以穿透到子組件的 DOM 中，作用于子組件的某些元素。
比如我們希望在父組件中修改子組件的樣式。
示例代碼：

子組件test.vue:
<template>
  <div class="test">這里是test組件，是子組件</div>
</template>
<style scoped></style>

在父組件A中使用這個組件：

父組件A.vue:
<template>
  <div class="wrapper">
    <el-statistic :value="output[0]" prefix="￥" />
    <div class="mt-1 title">本月銷售總額</div>
    <!-- 引入子組件 -->
    <test></test>
  </div>
</template>

現(xiàn)在我在A組件的樣式文件中，選擇test組件中根元素div class="test"，是可以選中的。

<style scoped lang="scss">
.wrapper {
  background-color: coral;
  .title {
    color: red;
  }
}
//test子組件
.test {
  color: blue;
}
</style>

能選中的原因是因?yàn)椋?code>test組件的根元素上存在著父組件A的data-v-d48692a9哈希值：

根據(jù)scoped樣式機(jī)制，針對選擇器.test，他選中的元素是在當(dāng)前組件A.vue中的，同時也是目標(biāo)元素，那么就給這個選擇器加上了哈希值data-v-d48692a9，變成.test[data-v-d48692a9]，這樣正好可以選中。

如果我們的test組件中還有其它嵌套的DOM，我們還是這樣選擇，可以選中嗎？

test.vue
<template>
  <div class="test">
    這里是test組件，是子組件
    <div class="test-inner">test內(nèi)部</div>
  </div>
</template>

//A組件的style
<style scoped lang="scss">
.wrapper {
  background-color: coral;
  .title {
    color: red;
  }
}
.test {
  color: blue;
  .test-inner {
    font-size: 30px;
    color: green;
  }
}
</style>

這樣是不能生效的，如圖。

原因是因?yàn)椋涸谶@種父子嵌套的結(jié)構(gòu)中，子組件是一個單根組件，那么這個子組件的根元素上就會帶著父組件的哈希值，但是其內(nèi)部的DOM并不會帶上，如圖：

這也就意味著，子組件的根元素是在渲染父組件中的，所以有父組件的哈希值，但是子組件內(nèi)部的dom元素，是屬于子組件
那么我們寫的這個選擇器，理論上是.test .test-inner[data-v-d48692a9]，雖然.test-inner是目標(biāo)元素，但他不是A.vue組件內(nèi)部的元素，他沒有data-v-d48692a9屬性，vue也不會把data-v-d48692a9附加到.test-inner上。

這時候就輪到了:deep()登場了。
如果我們把A組件中的樣式代碼改為：

.test {
  color: blue;
  :deep(.test-inner) {
    font-size: 30px;
    color: green;
  }
}

效果如圖

我們查看css選擇器如下：

根據(jù)GPT的回答，和我自己的總結(jié)，
加上:deep()以后，用來表示當(dāng)前樣式應(yīng)該跳過 scoped 的作用域限制，因此編譯后其選擇器部分不會附加 data-v-*，意味著不要編譯為.test-inner[data-v-*]的形式，而是保留為.test-inner的形式。

然后vue的scoped樣式機(jī)制是針對你的選擇器，從左向右的添加data-v-*的，從左向右開始找，找到你的目標(biāo)元素，同時也是當(dāng)前組件的內(nèi)部元素，就會添加這個data-v-*，因?yàn)檫@針對目標(biāo)元素，所有只會有一個元素被添加這個哈希值。
比如.test :deep(.test-inner)，deep的作用是告訴vue不給.test-inner添加哈希值，但是他是目標(biāo)元素啊，不給他加就會給他的最近的祖先（猜的），同時還是當(dāng)前組件內(nèi)部的元素添加，這里就是.test元素，也就有了上面的編譯結(jié)果。

那如果沒有祖先呢，比如：

:deep(.test) {
  color: red;
}

實(shí)際編譯后的css為[data-v-d48692a9] .test
首先.test是A組件內(nèi)部的元素，也是目標(biāo)元素，但是加上deep則是告訴vue不要給他加哈希值，這個選擇器又沒有父級，這時就會直接添加[data-v-d48692a9] 相當(dāng)于選中所有的帶有這個屬性的元素。

deep的用途就是用來在父組件中修改子組件內(nèi)部元素的樣式，所以通常是用來修改組件庫內(nèi)部的樣式的，針對我們自己的組件，直接在組件中修改樣式就行了，基本用不到deep。

3. 使用el-statistic組件，并修改樣式

組件代碼：

<template>
  <div class="wrapper">
    <el-statistic :value="output[0]" prefix="￥" />
    <div class="mt-1 title">本月銷售總額</div>
  </div>
</template>
<style scoped lang="scss">
.wrapper {
  background-color: lightgrey;
}
</style>

el-statistic現(xiàn)在就是一個組件，作為當(dāng)前組件的子組件，被引入進(jìn)來，現(xiàn)在我們的需求是將目前的樣式：

修改為下面的樣式：

假如直接添加類class="statistic"，然后添加樣式，實(shí)際是不生效的，如下：

 <el-statistic :value="output[0]" prefix="￥" class="statistic" />
<style scoped lang="scss">
.statistic {
  color: #fff;
}
</style>

查看元素：

可以看到￥符號和數(shù)字74811并不是statistic元素的直接文本，有其它盒子包裹了這個文本。當(dāng)前的樣式選中的元素是class=el-statistic statistic的div。實(shí)際上我們需要選中的是這個子組件內(nèi)部的元素：el-statistic__prefix內(nèi)部的span元素，所有首先我們需要選中el-statistic__prefix元素，這個邏輯正好就是在父組件中選中子組件內(nèi)部的元素，所以這里使用:deep()可以生效。

.el-statistic {
  color: green;
  :deep(.el-statistic__prefix) {
    color: blue;
  }
  :deep(.el-statistic__number) {
    color: red;
  }
}

到此這篇關(guān)于Vue中的scoped和 elememt-plus的樣式修改的文章就介紹到這了,更多相關(guān)Vue scoped和 elememt-plus樣式修改內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論