vue樣式穿透 ::v-deep的具體使用
之前在項(xiàng)目中用到了 vant，使用特別簡(jiǎn)單，而且組建也非常的豐富。即時(shí)這樣，在項(xiàng)目中肯定也需要用額外的樣式來(lái)打造自己的應(yīng)用。直接在 <style lang="scss" scoped> .... </style> 中編寫(xiě)的話(huà)只會(huì)影響當(dāng)前組件內(nèi)的樣式，但如果去掉scoped話(huà)又會(huì)影響全局樣式。想了好多方法，都沒(méi)得到很好的解決。
百度之后發(fā)現(xiàn) 可以用 /deep/或::v-deep來(lái)解決***（不過(guò)在vue3.0的環(huán)境下，使用/deep/時(shí)，編譯會(huì)報(bào)錯(cuò)）***。沒(méi)想到官方文檔中其實(shí)早就給出了解決方案，怪自己沒(méi)有認(rèn)真看過(guò)文檔，對(duì)vue的掌握還是不夠熟悉啊，得好好學(xué)習(xí)了。
深度作用選擇器
如果你希望 scoped 樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：
<style scoped> .a >>> .b { /* ... */ } </style>
上述代碼將會(huì)編譯成：
.a[data-v-f3f3eg9] .b { /* … */ }
有些像 Sass 之類(lèi)的預(yù)處理器無(wú)法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。
1、>>>
如果vue的style使用的是css，那么則
<style lang="css" scoped>
.a >>> .b {
/* ... */
}
</style>
但是像scss等預(yù)處理器卻無(wú)法解析>>>，所以我們使用下面的方式.
2、/deep/
<style lang="scss" scoped>
.a{
/deep/ .b {
/* ... */
}
}
</style>
但是有些開(kāi)發(fā)者反應(yīng)，在vue-cli3編譯時(shí)，deep的方式會(huì)報(bào)錯(cuò)或者警告。
此時(shí)我們可以使用第三種方式
3、::v-deep
切記必須是雙冒號(hào)
<style lang="scss" scoped>
.a{
::v-deep .b {
/* ... */
}
}
</style>
使用場(chǎng)景:
當(dāng)我們需要覆蓋element-ui中的樣式時(shí)只能通過(guò)深度作用選擇器
style為css時(shí)的寫(xiě)法如下
.a >>> .b {
***
}
style使用css的預(yù)處理器(less, sass, scss)的寫(xiě)法如下
第一種/deep/
/deep/ .a {
***
}
第二種::v-deep
::v-deep .a{
***
}
建議使用第二種方式,/deep/在某些時(shí)候會(huì)報(bào)錯(cuò),::v-deep更保險(xiǎn)并且編譯速度更快.
到此這篇關(guān)于vue樣式穿透 ::v-deep的具體使用的文章就介紹到這了,更多相關(guān)vue ::v-deep內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3導(dǎo)入Elementplus時(shí)組件無(wú)法加載的情況及解決
這篇文章主要介紹了Vue3導(dǎo)入Elementplus時(shí)組件無(wú)法加載的情況及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2024-03-03
Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼
這篇文章主要介紹了Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Vue elementUI 自定義表單模板組件功能實(shí)現(xiàn)
在項(xiàng)目開(kāi)發(fā)中，我們會(huì)遇到這種需求，在管理后臺(tái)添加自定義表單，在指定的頁(yè)面使用定義好的表單，這篇文章主要介紹了Vue elementUI 自定義表單模板組件,需要的朋友可以參考下2022-12-12
使用Vue實(shí)現(xiàn)簡(jiǎn)單的信號(hào)和電池電量組件
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)簡(jiǎn)單的信號(hào)和電池電量組件效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
vue中使用echarts繪制雙Y軸圖表時(shí)刻度沒(méi)有對(duì)齊的兩種解決方法(最新方案)
這篇文章主要介紹了vue中使用echarts繪制雙Y軸圖表時(shí)，刻度沒(méi)有對(duì)齊的兩種解決方法,主要原因是因?yàn)榭潭仍陲@示時(shí)，分割段數(shù)不一樣，導(dǎo)致左右的刻度線(xiàn)不一致，不能重合在一起，下面給大家分享解決方法，需要的朋友可以參考下2024-03-03
VUE使用draggable實(shí)現(xiàn)組件拖拽
這篇文章主要為大家詳細(xì)介紹了VUE使用draggable實(shí)現(xiàn)組件拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3+ts項(xiàng)目搭建的實(shí)現(xiàn)示例
這篇文章主要介紹了vue3+ts項(xiàng)目搭建的實(shí)現(xiàn)示例,本文目的在于記錄自己項(xiàng)目框架搭建的過(guò)程,通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
這篇文章主要介紹了vue表格(table)計(jì)算總計(jì)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
在Vue3.x中實(shí)現(xiàn)類(lèi)似React.lazy效果的方法詳解
React 的 React.lazy 功能為組件懶加載提供了原生支持,允許開(kāi)發(fā)者將組件渲染推遲到實(shí)際需要時(shí)再進(jìn)行,雖然 Vue3.x 沒(méi)有一個(gè)直接對(duì)應(yīng)的 lazy 函數(shù),但我們可以通過(guò)動(dòng)態(tài)導(dǎo)入和 defineAsyncComponent 方法來(lái)實(shí)現(xiàn)類(lèi)似的效果,需要的朋友可以參考下2024-03-03