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

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

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

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

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

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

<template>
  <div class="container" data-v-001>
    <h3 data-v-001>轮播图组件</h3>
  </div>
</template>

<style>
/* 通过中括号"属性选择器"，来防止组件之间的"样式冲突问题"
   因为每个组件分配的自定义属性是"唯一的” */
.container[data-v-001] {
  border: 1px solid red;
}
</style>

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

1.2 style 节点的 scoped 属性

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

<template>
  <div class="container">
    <h3>轮播图组件</h3>
  </div>
</template>

<style scoped>
/* style 节点的 scoped 属性，用来自动为每个组件分配唯一的“自定义属性”,
   并自动为当前组件的 DOM 标签和 style 样式应用这个自定义属性，防止组件的样式冲突问题 */
.container {
  border: 1px solid red;
}
</style>

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

1.3 /deep/ 样式穿透

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

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

<style lang="less" scoped>
.title {
  /* 不加/deep/，生成的选择器格式为 .title[data-v-052242de] */
  color: blue;
}

/deep/ .title {
  /* 加/deep/，生成的选择器格式为 [data-v-052242de] .title */
  color: blue;
}
</style>

样式穿透的使用场景

你的组件加了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语法实现内部样式私有

<template>
  <div class="myClassName">
    <h3>轮播图组件</h3>
  </div>
</template>

<style lang="less">
// myClassName这个类名全局唯一
.myClassName {
  h3 {
    color: red;
  }
}
</style>