vue3中的:deep()深度選擇器詳解
今天看到這篇文章被GitCode收錄，才發(fā)覺原來::v-deep已經(jīng)被廢棄了，以前辛苦學(xué)習(xí)的時(shí)光還歷歷在目，如今卻已是時(shí)過境遷。所以更新一下文章，防止誤導(dǎo)他人。
1.什么是深度選擇器？
scoped 屬性是HTML5中的新屬性，<style>標(biāo)簽在加上了scoped屬性時(shí)，樣式實(shí)現(xiàn)組件私有化，父組件的樣式不會(huì)滲透到子組件，不會(huì)造成局部或全局的污染。這個(gè)時(shí)候如果你想讓樣式中的一個(gè)選擇器作用得更深（滲透到子組件），可以使用深度選擇器:v-deep。
2.舉個(gè)栗子
在<style>中加了scoped屬性后，子組件的內(nèi)部元素不會(huì)自動(dòng)增加 data-v-xxxx屬性，我們直接修改element按鈕里的文字樣式時(shí)，這樣寫并不能生效，除非去掉scoped。
<template>
<el-row class="mb-4">
<el-button>按鈕</el-button>
</el-row>
</template>
<style lang="scss" scoped>
.el-button>span {
color: red;
}
</style>
使用:deep，即可解決這個(gè)問題
<template>
<el-row class="mb-4">
<el-button>按鈕</el-button>
</el-row>
</template>
<style lang="scss" scoped>
:deep(.el-button>span) {
color: red;
}
</style>
以前的寫法，現(xiàn)在已不支持：
>>> .el-button>span {
color: red;
}
::deep(.el-button>span){
color:red;
}不支持的寫法會(huì)報(bào)錯(cuò)：
到此這篇關(guān)于vue3中的:deep()深度選擇器的文章就介紹到這了,更多相關(guān)vue3 :deep()深度選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家介紹了vue保存自動(dòng)格式化換行，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了Vue3異步組件Suspense的使用方法詳解,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue模式history下在iis中配置流程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了VUE中的filters過濾器使用方法，文章主要通過描述全局過濾器、全局過濾器之單一掛載、全局過濾器之批量掛載?、組件過濾器展開內(nèi)容，具有一定的參考價(jià)值組要的小伙伴可以參考一下2022-03-03
Vue實(shí)現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式
這篇文章主要介紹了Vue實(shí)現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
由于在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理,也就是用圖表展示,眾所周知echarts是非常強(qiáng)大的插件,所以這篇文章主要給大家介紹了關(guān)于vue+echarts圖表使用的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue動(dòng)態(tài)擴(kuò)展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對(duì)象)
這篇文章主要介紹了Vue動(dòng)態(tài)擴(kuò)展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對(duì)象)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能
這篇文章主要介紹了基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別
這篇文章主要介紹了詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07