??‍?? 寫(xiě)在開(kāi)頭

“你用 Element Plus 寫(xiě)了個(gè)按鈕，想改下 hover 顏色，結(jié)果死活不生效！最后查了半天，發(fā)現(xiàn)得加個(gè) :deep() 才行”

其實(shí)，這是 Vue 中一個(gè)非常常見(jiàn)的坑：樣式作用域沖突。那為什么用 UI 庫(kù)時(shí)，加上 :deep()、::v-deep 或 >>>后，樣式就能生效呢？

它們是什么？有什么區(qū)別？什么時(shí)候該用哪個(gè)？

一、先說(shuō)背景

我們?cè)?Vue 單文件組件（.vue 文件）里寫(xiě)樣式時(shí)，通常會(huì)加上 scoped 屬性：

<template>
  <el-button>點(diǎn)我</el-button>
</template>
<style scoped>
.el-button {
  background: red;
}
</style>

加了 scoped 后，Vue 會(huì)自動(dòng)給這個(gè)組件里的所有元素加上一個(gè)唯一的屬性（比如 data-v-123456），然后把 CSS 選擇器也加上這個(gè)屬性，變成：

.el-button[data-v-123456] {
  background: red;
}

這樣做的好處是：樣式只作用于當(dāng)前組件，不會(huì)污染全局。、

但問(wèn)題來(lái)了：Element Plus 的 <el-button> 組件內(nèi)部結(jié)構(gòu)，是在它自己的組件里定義的。也就是說(shuō)，你寫(xiě)的 .el-button 元素，其實(shí)是 Element Plus 渲染出來(lái)的子組件，它身上沒(méi)有你當(dāng)前組件的 data-v-xxx 屬性！

所以你的樣式根本匹配不到它，自然就失效了。

二、那怎么辦？

為了解決這個(gè)問(wèn)題，Vue 提供了樣式穿透（style penetration）的語(yǔ)法，讓你能穿透當(dāng)前組件的作用域，去影響子組件內(nèi)部的元素。

Vue 社區(qū)出現(xiàn)過(guò)三種寫(xiě)法：

下面我們一個(gè)個(gè)拆解。

1. >>>：曾經(jīng)的快捷方式，但問(wèn)題很多

早期 Vue2 時(shí)代，很多人用：

<style scoped>
.parent >>> .child {
  color: blue;
}
</style>

它的意思是：從 .parent 開(kāi)始，穿透到所有后代中的 .child。

但問(wèn)題在于：

• Sass/Less 等預(yù)處理器不認(rèn) >>>，會(huì)報(bào)錯(cuò)。
• 不是標(biāo)準(zhǔn) CSS 語(yǔ)法。
• Vue3 已經(jīng)明確不再支持。

所以現(xiàn)在基本可以忘掉它了。

2. ::v-deep：Vue2 到 Vue3 的橋梁

為了兼容預(yù)處理器，Vue 引入了 ::v-deep：

<style scoped lang="scss">
.parent ::v-deep(.child) {
  color: blue;
}
</style>

或者更常見(jiàn)的寫(xiě)法：

<style scoped lang="scss">
.parent ::v-deep(.child) {
  color: blue;
}
</style>

它在 Vue2 和 Vue3 中都能用，算是一個(gè)安全的過(guò)渡方案。

但注意：在 Vue3 中，官方文檔已經(jīng)明確建議使用 :deep() 替代它。

3. :deep()：Vue3 的標(biāo)準(zhǔn)答案

Vue3 引入了更簡(jiǎn)潔、更符合 CSS 規(guī)范的偽類函數(shù)寫(xiě)法：

<style scoped>
:deep(.el-button) {
  background: red !important;
}
</style>

或者配合父級(jí)選擇器：

<style scoped>
.my-wrapper :deep(.el-input__inner) {
  border-radius: 10px;
}
</style>

優(yōu)點(diǎn)：

• 語(yǔ)法清晰，像原生 CSS。
• 支持所有預(yù)處理器（Sass/Less/Stylus）。

:deep() 本質(zhì)上是一個(gè)編譯時(shí)轉(zhuǎn)換，Vue 在構(gòu)建時(shí)會(huì)把它展開(kāi)成帶 data-v-xxx 的復(fù)雜選擇器，從而實(shí)現(xiàn)穿透。

三、怎么正確修改 Element Plus 的樣式？

舉個(gè)真實(shí)例子：你想把 Element Plus 的輸入框圓角改成 8px。

錯(cuò)誤寫(xiě)法（不生效）：

<style scoped>
.el-input__inner {
  border-radius: 8px;
}
</style>

正確寫(xiě)法：

<template>
  <div class="my-form">
    <el-input v-model="value" />
  </div>
</template>
<style scoped>
.my-form :deep(.el-input__inner) {
  border-radius: 8px;
}
</style>

為什么要加 .my-form 這個(gè)父級(jí)？

避免全局污染！如果直接寫(xiě) :deep(.el-input__inner)，那么這個(gè)頁(yè)面里所有 Element 輸入框都會(huì)被改掉。加上父級(jí)限定，就能精準(zhǔn)控制范圍。

到此這篇關(guān)于Vue 中的 deep、v-deep 和 >>>區(qū)別解析的文章就介紹到這了,更多相關(guān)Vue deep、v-deep 和 >>> 區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論