vue3中的:deep()深度選擇器詳解
今天看到這篇文章被GitCode收錄，才發(fā)覺原來::v-deep已經(jīng)被廢棄了，以前辛苦學(xué)習(xí)的時光還歷歷在目，如今卻已是時過境遷。所以更新一下文章，防止誤導(dǎo)他人。
1.什么是深度選擇器？
scoped 屬性是HTML5中的新屬性，<style>標(biāo)簽在加上了scoped屬性時，樣式實現(xiàn)組件私有化，父組件的樣式不會滲透到子組件，不會造成局部或全局的污染。這個時候如果你想讓樣式中的一個選擇器作用得更深（滲透到子組件），可以使用深度選擇器:v-deep。
2.舉個栗子
在<style>中加了scoped屬性后，子組件的內(nèi)部元素不會自動增加 data-v-xxxx屬性，我們直接修改element按鈕里的文字樣式時，這樣寫并不能生效，除非去掉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，即可解決這個問題
<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;
}不支持的寫法會報錯：
到此這篇關(guān)于vue3中的:deep()深度選擇器的文章就介紹到這了,更多相關(guān)vue3 :deep()深度選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue如何使用moment處理時間戳轉(zhuǎn)換成日期或時間格式
這篇文章主要給大家介紹了關(guān)于vue如何使用moment處理時間戳轉(zhuǎn)換成日期或時間格式的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
本文主要介紹了深入理解vue3中的reactive()，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了vue多層嵌套路由,結(jié)合實例形式分析了vue.js多層嵌套路由的概念、原理及相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vuex2中使用mapGetters/mapActions報錯的解決方法
這篇文章主要介紹了vuex2中使用mapGetters/mapActions報錯解決方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
vue3+vite實現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問題)
項目全線使用vue3的時候,自然使用的是配套更加契合的vite打包工具,于是自然而然會用到很多新的語法,本文給大家介紹了vue3+vite實現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問題),需要的朋友可以參考下2024-04-04
elementUI自定義上傳文件功能實現(xiàn)(前端后端超詳細過程)
自定義上傳思路很簡單,下面這篇文章主要給大家介紹了關(guān)于elementUI自定義上傳文件功能實現(xiàn)(前端后端超詳細過程)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue計算屬性+vue中class與style綁定,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
vue的過濾器通常用在一些常見的文本格式化，過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式。本文給大家介紹了web前端vue filter 過濾器的相關(guān)知識，感興趣的朋友一起看看吧2018-01-01
用v-html解決Vue.js渲染中html標(biāo)簽不被解析的問題
這篇文章主要給大家介紹了如何利用v-html解決Vue.js渲染過程中html標(biāo)簽不能被解析，html標(biāo)簽顯示為字符串的問題，文中通過圖文介紹的很詳細，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12