Vue组件间的样式冲突污染问题详解

默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

导致组件之间样式冲突的根本原因是:

• 单页面应用程序中，所有组件的dom结构，都是基于唯一的index.html页面进行呈现的。

• 每个组件中的样式，都会影响整个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>

此时发现页面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也能解决组件样式冲突，
因为他会自动帮我们生成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文件都加，但是发现效果是受right的样式影响
，这是因为right没有加scoped，而此时我们想要给left文件加样式呢？
标签前面加个/deep/就行了，加上deep是[data--38a98c97] h5这样显示的，不加是h5[data--38a98c97]
这样显示的
*/
/* 在父组件中修改子组件样式，可用deep */
/deep/ h5{
   color:orange;
}
</style>

当使用第三方组件库的时候，如果要修改第三方组件默认样式的时候，也需要用到/deep/

来源：https://blog.csdn.net/qq_72760247/article/details/127400877