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/

作者:未及545 原文地址:https://blog.csdn.net/qq_72760247/article/details/127400877

%s 个评论

要回复文章请先登录注册