Vue3中樣式滲透:deep()無(wú)效怎么解決

本篇內(nèi)容主要講解“Vue3中樣式滲透:deep()無(wú)效怎么解決”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue3中樣式滲透:deep()無(wú)效怎么解決”吧!

:deep()的使用場(chǎng)景：

如果給當(dāng)前組件的style 節(jié)點(diǎn)添加了scoped 屬性，則當(dāng)前組件的樣式對(duì)其子組件是不生效的。如果想讓某些樣式對(duì)子組件生效，則需要使用:deep()。

我原本覺(jué)得這個(gè)沒(méi)有難度，于是寫(xiě)了個(gè)案例來(lái)驗(yàn)證。然后問(wèn)題出現(xiàn)了，:deep()定義的樣式在子組件中不起作用。
我開(kāi)始找錯(cuò)，把包括冒號(hào)、括號(hào)在內(nèi)的語(yǔ)法格式等都檢查了一遍，發(fā)現(xiàn)語(yǔ)法格式?jīng)]有問(wèn)題，控制臺(tái)也不報(bào)錯(cuò)，但是:deep()格式的樣式在子組件中就是無(wú)效。
幸好我這兒有一個(gè):deep()格式起作用的范例，沒(méi)辦法，只好把兩個(gè)文件中的父組件、子組件逐一比對(duì)，前后費(fèi)了不少時(shí)間，終于找到了問(wèn)題所在。

我在前面練習(xí)的時(shí)候，Vue2.X中要求元素必須在一個(gè)根節(jié)點(diǎn)中，Vue3.X無(wú)此要求，可以不在一個(gè)根節(jié)點(diǎn)中，所以為了驗(yàn)證這一點(diǎn)，我把外層的

刪去了，果然不報(bào)錯(cuò)。

可是問(wèn)題就出在這個(gè)根節(jié)點(diǎn)上，如果App.vue中沒(méi)有這個(gè)根節(jié)點(diǎn)，那么:deep()不起作用，我把根節(jié)點(diǎn)加上，:deep()樣式就生效了。
唉，感覺(jué)自己被這個(gè)根節(jié)點(diǎn)坑了一把。

1.父組件App.vue中代碼

<style lang="less" scoped>
  :deep(.title3){
    background-color:antiquewhite;
  }
</style>

2.子組件中的代碼

<template>
  <h4 class="title3">受父組件影響的內(nèi)容</h4>
</template>

到此，相信大家對(duì)“Vue3中樣式滲透:deep()無(wú)效怎么解決”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！