小編這次要給大家分享的是如何使用vue樣式穿透 ::v-deep，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

十年的洪湖網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整洪湖建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“洪湖網(wǎng)站設(shè)計(jì)”,“洪湖網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

之前在項(xiàng)目中用到了 vant，使用特別簡單，而且組建也非常的豐富。即時(shí)這樣，在項(xiàng)目中肯定也需要用額外的樣式來打造自己的應(yīng)用。直接在 中編寫的話只會(huì)影響當(dāng)前組件內(nèi)的樣式，但如果去掉scoped話又會(huì)影響全局樣式。想了好多方法，都沒得到很好的解決。

百度之后發(fā)現(xiàn) 可以用 /deep/或::v-deep來解決***（不過在vue3.0的環(huán)境下，使用/deep/時(shí)，編譯會(huì)報(bào)錯(cuò)）***。沒想到官方文檔中其實(shí)早就給出了解決方案，怪自己沒有認(rèn)真看過文檔，對(duì)vue的掌握還是不夠熟悉啊，得好好學(xué)習(xí)了。

深度作用選擇器

如果你希望 scoped 樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：
上述代碼將會(huì)編譯成：
.a[data-v-f3f3eg9] .b { /* … */ }

有些像 Sass 之類的預(yù)處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。

1、>>>

如果vue的style使用的是css，那么則

但是像scss等預(yù)處理器卻無法解析>>>，所以我們使用下面的方式.

2、/deep/

但是有些開發(fā)者反應(yīng)，在vue-cli3編譯時(shí)，deep的方式會(huì)報(bào)錯(cuò)或者警告。
此時(shí)我們可以使用第三種方式

3、::v-deep

切記必須是雙冒號(hào)

使用場(chǎng)景:

當(dāng)我們需要覆蓋element-ui中的樣式時(shí)只能通過深度作用選擇器

style為css時(shí)的寫法如下

 .a >>> .b {
  ***
 }

style使用css的預(yù)處理器(less, sass, scss)的寫法如下

第一種/deep/

 /deep/ .a {
  ***
 }

第二種::v-deep

::v-deep .a{
 ***
}

建議使用第二種方式,/deep/在某些時(shí)候會(huì)報(bào)錯(cuò),::v-deep更保險(xiǎn)并且編譯速度更快.

看完這篇關(guān)于如何使用vue樣式穿透 ::v-deep的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。