Vue组件之间的样式冲突问题【Vue学习笔记12】

1. 组件之间的样式冲突问题

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

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

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

1.1 思考：如何解决组件样式冲突的问题

为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域，示例代码如下：

需要同一组件加相同的属性，不同的组件加的属性不一样。

1.2 style 节点的 scoped 属性

为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：

在底层Vue会为该组件的标签加上如1.1所描述的属性data-v-xxxx一串数字

1.3 /deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件的非根元素是不生效的（父组件添加scoped属性，会给子组件的根元素同理添加一个相同的属性，但是子组件的非根元素并不会添加）。如果想让某些样式对子组件的非根元素生效，可以使用 /deep/ 深度选择器。

title属性是子组件的非根元素的类型

样式穿透的使用场景

你的组件加了scoped属性，组件内部使用第三方组件库的时候，如果有修改第三方组件库默认样式的需求，需要用到/deep/

注意-------

一个.vue组件可以写多个style标签，结合这一特点，我们可把需要加scoped和不需要加scoped的样式分在两个style标签内去写

1.4 /deep/和>>>和::v-deep区别

/deep/

Vue2.x的深度作用选择器正式写法

• 仅适用于Vue2.x版本
• 支持css预加载器

::v-deep

Vue3.x的深度作用选择器正式写法

>>>

深度作用选择器的简写形式

• 只作用于css，不支持css预加载器（less/scss）
• 是/deep/的简写形式，适用于Vue2.x版本，Vue3.x版本使用会报错

1.5 其他方法解决样式污染

可以给你的组件添加一个全局不重复的类，配合less语法实现内部样式私有