首頁技術(shù)文章正文

怎樣解決vue組件之間的樣式?jīng)_突問題?

更新時(shí)間:2022-08-19 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

默認(rèn)情況下,寫在 .vue 組件中的樣式會(huì)全局生效,因此很容易造成多個(gè)組件之間的樣式?jīng)_突問題。導(dǎo)致組件之間樣式?jīng)_突的根本原因是:

① 單頁面應(yīng)用程序中,所有組件的 DOM 結(jié)構(gòu),都是基于唯一的 index.html 頁面進(jìn)行呈現(xiàn)的。

② 每個(gè)組件中的樣式,都會(huì)影響整個(gè) index.html 頁面中的 DOM 元素。

解決組件樣式?jīng)_突問題,可以參考以下幾種方法:

1.分配唯一的自定義屬性

為每個(gè)組件分配唯一的自定義屬性,在編寫組件樣式時(shí),通過屬性選擇器來控制樣式的作用域,示例代碼如下:

< template > < div class = "container"data - v - 001 > 
< h3 data-v-001 > 輪播圖組件 </h3> 
</div> 
</template> 

<style>
  /*通過中括號“屬性選擇器”,來防止組件之間的樣式?jīng)_突問題,
    因?yàn)槊總€(gè)組件分配的自定義屬性是“唯一的”*/
    .container[data - v - 001] {
        border: 1 px solid red;
    } 
</style>

2. style 節(jié)點(diǎn)的 scoped 屬性

為了提高開發(fā)效率和開發(fā)體驗(yàn),vue 為 style 節(jié)點(diǎn)提供了 scoped 屬性,從而防止組件之間的樣式?jīng)_突問題,示例代碼如下:

<template>
 <div class="container"data-v-001>
  <h3 data-v-001 >輪播圖組件</h3>
 </div> 
</template> 

<style>
    /* 通過中括號“屬性選擇器”,來防止組件之間的樣式?jīng)_突問題,
       因?yàn)槊總€(gè)組件分配的自定義屬性是“唯一的”*/
    .container[data - v - 001] {
        border: 1 px solid red;
    }
</style>

3./deep/ 樣式穿透

如果給當(dāng)前組件的 style 節(jié)點(diǎn)添加了 scoped 屬性,則當(dāng)前組件的樣式對其子組件是不生效的。如果想讓某些樣式對子組件生效,可以使用 /deep/ 深度選擇器。

<style scoped>
.title {
  color:blue;/*不加/deep/時(shí),生成的選擇器格式為.title[data-v-052242de]*/
}

/deep/ .title {
  color:blue;/*加上 /deep/ 時(shí),生成的選擇器格式為[data-v-052242de] .title*/
}
</style>

注意/deep/是vue2.x中實(shí)現(xiàn)樣式穿透的方案。在vue3.x中推薦使用:deep()替代/deep/。





分享到:
在線咨詢 我要報(bào)名
和我們在線交談!