亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue組件style中scoped的作用及說明

 更新時(shí)間：2024年09月03日 09:28:59   作者：Ocean__Lv  
這篇文章主要介紹了vue組件style中scoped的作用及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

style中scoped的作用

scoped的作用：

使當(dāng)前組件的樣式不會和其它組件沖突，因?yàn)樗鼤o每個(gè)組件相關(guān)的選擇器添加不會重復(fù)的屬性

//沒有添加scoped
h1 {

}

//添加scoped
h1[data-e543434] {
    
}

注意事項(xiàng)：

  • ? 1、使用 scoped 后，父組件的樣式將不會滲透到子組件中。
  • ? 2、不過一個(gè)子組件的*** 根節(jié)點(diǎn) **會同時(shí)受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。
  • ? 3、這樣設(shè)計(jì)是為了讓父組件可以從布局的角度出發(fā)，調(diào)整其子組件根元素的樣式
<style scoped>

</style>

如果希望父組件的樣式滲透到子組件，可以使用*** 樣式穿透 **

scss的樣式穿透的寫法： 加上::v-deep（如果不兼容，就加/deep/ ）

//方案一
.wrapper ::v-deep .swiper-pagination-bullet {
opacity 1
background-color #fff
}
//方案二
.swiper-container /deep/ .swiper-pagination-bullet {
background-color: #f00;
opacity: 1;
}

vue中style加上scoped屬性后部分樣式失效

當(dāng) <style> 標(biāo)簽有 scoped 屬性時(shí)，它的 CSS 只作用于當(dāng)前組件中的元素；使用 scoped 后，父組件的樣式將不會滲透到子組件中。

不過一個(gè)子組件的根節(jié)點(diǎn)會同時(shí)受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。

1.混用本地和全局樣式

<style>
/* 全局樣式 */
</style>

<style scoped>
/* 本地樣式 */
</style>

2.深度作用選擇器（樣式穿透）

  •  vue2： >>> 或者 /deep/
  •  vue3： &:deep(calssName)

具體可看vue官方文檔的vue-loader

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論