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

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

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

  • 单页面应用程序中,所有组件的dom结构,都是基于唯一的index.html页面进行呈现的。
  • 每个组件中的样式,都会影响整个index.html页面中的dom元素。

给left.vue文件中的p标签添加一个字体样式



Vue组件间的样式冲突污染问题详解_第1张图片

此时发现页面right.vue文件也受影响变成红色了




/deep/的使用



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

到此这篇关于Vue组件间的样式冲突污染问题详解的文章就介绍到这了,更多相关Vue组件样式冲突内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(Vue组件间的样式冲突污染问题详解)