Vue組件間的樣式?jīng)_突污染問題詳解

更新時間：2022年11月30日 11:30:33 作者：未及545

默認情況下，寫在.vue組件中的樣式會全局生效，因此很容易造成多個組件之間的樣式?jīng)_突問題。導致組件之間樣式?jīng)_突的根本原因，我們接下來探究一下

默認情況下，寫在.vue組件中的樣式會全局生效，因此很容易造成多個組件之間的樣式?jīng)_突問題。

導致組件之間樣式?jīng)_突的根本原因是:

單頁面應(yīng)用程序中，所有組件的dom結(jié)構(gòu)，都是基于唯一的index.html頁面進行呈現(xiàn)的。
每個組件中的樣式，都會影響整個index.html頁面中的dom元素。

給left.vue文件中的p標簽添加一個字體樣式

<template>
  <div>
    <p >left組件</p>
    <MyCount :num="4"></MyCount>
  </div>
</template>
<script>
import MyCount from "@/components/count.vue"
export default {
components:{
    MyCount
}
}
</script>
<style>
p{color:red}
</style>

此時發(fā)現(xiàn)頁面right.vue文件也受影響變成紅色了

<template>
  <div>
    <!-- 給單個頁面添加固定的自定義data-v-001屬性，如此就能解決沖突問題
    一個頁面最好用同一個，防止混亂
    -->
    <!-- <p data-v-001>left組件</p> -->
    <p >left組件</p>
    <MyCount :num="4"></MyCount>
  </div>
</template>
<script>
import MyCount from "@/components/count.vue"
export default {
components:{
    MyCount
}
}
</script>
<!-- 只不過上面的方法一個一個添加太過麻煩
直接在style標簽上添加scoped也能解決組件樣式?jīng)_突，
因為他會自動幫我們生成data-v-number
-->
<style scoped>
p{color:red}
</style>

/deep/的使用

<template>
  <div>
    <p >left組件</p>
    <MyCount :num="4"></MyCount>
   
  </div>
</template>
<script>
import MyCount from "@/components/count.vue"
export default {
components:{
    MyCount
}
}
</script>
<style scoped>
p{color:red}
/* 給count組件加樣式，left和right文件都加，但是發(fā)現(xiàn)效果是受right的樣式影響
，這是因為right沒有加scoped，而此時我們想要給left文件加樣式呢？
標簽前面加個/deep/就行了，加上deep是[data--38a98c97] h5這樣顯示的，不加是h5[data--38a98c97] 
這樣顯示的
*/
/* 在父組件中修改子組件樣式，可用deep */
 /deep/ h5{
    color:orange;
}
</style>

當使用第三方組件庫的時候，如果要修改第三方組件默認樣式的時候，也需要用到/deep/

到此這篇關(guān)于Vue組件間的樣式?jīng)_突污染問題詳解的文章就介紹到這了,更多相關(guān)Vue組件樣式?jīng)_突內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: