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

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

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

默認(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元素。

給left.vue文件中的p標(biāo)簽添加一個(gè)字體樣式

<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>

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

<template>
  <div>
    <!-- 給單個(gè)頁面添加固定的自定義data-v-001屬性，如此就能解決沖突問題
    一個(gè)頁面最好用同一個(gè)，防止混亂
    -->
    <!-- <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>
<!-- 只不過上面的方法一個(gè)一個(gè)添加太過麻煩
直接在style標(biāo)簽上添加scoped也能解決組件樣式?jīng)_突，
因?yàn)樗麜?huì)自動(dò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的樣式影響
，這是因?yàn)閞ight沒有加scoped，而此時(shí)我們想要給left文件加樣式呢？
標(biāo)簽前面加個(gè)/deep/就行了，加上deep是[data--38a98c97] h5這樣顯示的，不加是h5[data--38a98c97] 
這樣顯示的
*/
/* 在父組件中修改子組件樣式，可用deep */
 /deep/ h5{
    color:orange;
}
</style>

當(dāng)使用第三方組件庫(kù)的時(shí)候，如果要修改第三方組件默認(rèn)樣式的時(shí)候，也需要用到/deep/

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

您可能感興趣的文章: