IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

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

      • 发布时间:
        2023-03-11
      • 版权所有:
        云和教育
      • 分享:

      默认情况下,写在 .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/。