如何解决vue组件之间的样式冲突问题？

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

① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的。

② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素。

解决组件样式冲突问题，可以参考以下几种方法：

1.分配唯一的自定义属性

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

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

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

2. style 节点的 scoped 属性

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

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

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

3./deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。

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

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

注意/deep/是vue2.x中实现样式穿透的方案。在vue3.x中推荐使用：deep()替代/deep/。