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/