Vue组件之间的样式冲突问题

一、组件的三大组成部分

二、组件的样式冲突 scoped

三、样式穿透/deep/

如果给组件的 style 节点添加了 scoped 属性，在这个style标签内的所有选择器都会加上[data-v-cbe7c9bc]，如：

.el-button {
  color: blue;
}
// 生成的选择器格式为 
.el-button[data-v-cbe7c9bc]  {
  color: blue;
}

也就是说，当组件加上scoped后，在当前组件修改ElementUI组件的样式是不生效的

这个时候就需要用到样式穿透/deep/

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

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

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

四、/deep/和>>>和::v-deep区别

4.1. /deep/

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

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

4.2. ::v-deep

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

4.3. >>>

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

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

五、其他方法解决样式污染

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

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

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