快捷導(dǎo)航

vue中各種deep的區(qū)別解析

更新時(shí)間：2024年10月12日 10:59:28 作者：蠟筆大杺

在Vue3中,推薦使用::deep作為深度選擇器,它比Vue2中的::v-deep語法更簡(jiǎn)潔,::v-deep、::deep、:deep()、>>>和/deep/都是用于穿透組件作用域的選擇器,但Vue3更傾向于使用::deep或:deep(),感興趣的朋友跟隨小編一起看看吧

1. ::v-deep

::v-deep 是 Vue 2 中引入的深度選擇器，在 Vue 3 中仍然可用，但不再是推薦的寫法。它用于穿透作用域，將樣式應(yīng)用到子組件的元素上。

示例

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
<style scoped>
.parent ::v-deep .child-class {
  color: red;
}
</style>

2. ::deep

::deep 是 Vue 3 中推薦的深度選擇器。它與 ::v-deep 功能相同，但語法更簡(jiǎn)潔。

示例

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
<style scoped>
.parent ::deep .child-class {
  color: red;
}
</style>

3. :deep()

:deep() 是 Vue 3 中推薦的另一種深度選擇器。它是一個(gè)偽類，可以嵌套在其他選擇器中使用，提供了更靈活的語法。

示例

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
<style scoped>
.parent :deep(.child-class) {
  color: red;
}
</style>

4 . >>>

在早期版本的Vue.js中，>>> 也被用來作為深度選擇器。它的用法與 ::v-deep 類似，但是現(xiàn)在已經(jīng)被 ::v-deep 或 ::deep 所取代。
示例：

.parent-class >>> .child-class {
  color: blue;
}

5. /deep/

/deep/ 也是早期Vue.js版本中的一個(gè)深度選擇器。不過，隨著Vue 2.6.0的發(fā)布，官方建議使用 ::v-deep 替代 /deep/。在某些情況下，特別是在使用某些構(gòu)建工具或配置時(shí)，/deep/ 可能仍然有效，但并不推薦繼續(xù)使用。
示例：

.parent-class /deep/ .child-class {
  color: green;
}

到此這篇關(guān)于vue中各種deep的區(qū)別的文章就介紹到這了,更多相關(guān)vue deep區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue
deep

相關(guān)文章

webpack+vue.js實(shí)現(xiàn)組件化詳解
vue的開發(fā)體驗(yàn)還是比較愉悅的。首先文檔非常友好，所以上手會(huì)比較快。其次，配合webpack和vue-loader，每個(gè)頁面都是一個(gè).vue文件，寫起來很方便。所以很適合做組件化開發(fā)，這篇文章我們就來一起看看webpack+vue.js如何實(shí)現(xiàn)組件化。
2016-10-10
Vue-cli打包后如何本地查看的操作
這篇文章主要介紹了Vue-cli打包后如何本地查看的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
ElementUI年份范圍選擇器功能實(shí)現(xiàn)
elementUI中有日期范圍組件,月份范圍選擇的,就是沒有年份范圍選擇的,需要加一個(gè)類似風(fēng)格的,下面這篇文章主要給大家介紹了關(guān)于ElementUI年份范圍選擇器功能實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2023-02-02
Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))
本文主要介紹了Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果
這篇文章主要介紹了uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果,實(shí)現(xiàn)步驟和思路都很簡(jiǎn)單，今天通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-11-11
vue el-row中ul間距問題
這篇文章主要介紹了vue el-row中ul間距問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue axios請(qǐng)求成功卻進(jìn)入catch的原因分析
這篇文章主要介紹了vue axios請(qǐng)求成功卻進(jìn)入catch的原因分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue 3.0中jsx語法的使用
這篇文章主要介紹了Vue 3.0 中 jsx 語法使用，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-11-11
Vue3中defineEmits、defineProps?不用引入便直接用
這篇文章主要介紹了Vue3中defineEmits、defineProps?不用引入便直接用，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-09-09
Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果
這篇文章主要介紹了Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-05-05