专栏首页python3vue 中父级样式深度覆盖子组件

vue 中父级样式深度覆盖子组件

一、概述

项目需要的原因,在sub组件的父级list组件中需要用到xhcj组件,同时sub组件中也用到了xhcj组件,两个地方代码逻辑是相同,仅仅是样式有些微的差别,所以决定共用组件,然后覆盖样式。

style标签上的scoped属性会致使样式只作用于当前组件,对子组件是不起作用的,但是不加scoped会使父级引入的xhcj和这里引用的xhcj样式都变化,所以也是不可以的。

二、解决方法

这是最开始写的版本,在sub中,我写了两个style标签,需要覆盖的那部分没有加scoped属性,也实现了我需要的效果,但是写两个style标签还是觉得不太合适。

<style scoped>
   ...
</style>
<style>
//.subscribe  这个样式sub组件中的,是为了覆盖这个组件下面的xhcj组件的样式  
  .subscribe .xhjj{
    border: none;
    position: static;
    background: transparent;
    width: auto;
    height: auto;
    .sbottom{
      height: auto;
      overflow: inherit;
      overflow-x: inherit;
      .treeFirst{
        border: none;
        background: transparent;
      }
      .flex-w-wrap{
        background-color: transparent!important;
        .treethird{
          width: 25%;
        }
      }
    }
  }

</style>

 然后改成了下面这个版本

<style scoped>
  ...... 
  .subscribe /deep/ .xhjj{
    border: none;
    position: static;
    background: transparent;
    width: auto;
    height: auto;
    .sbottom{
      height: auto;
      overflow: inherit;
      overflow-x: inherit;
      .treeFirst{
        border: none;
        background: transparent;
      }
      .flex-w-wrap{
        background-color: transparent!important;
        .treethird{
          width: 25%;
        }
      }
    }
  }

</style>

重点位置已经标红,这里有了scoped属性,不再使用两个style标签去写。

但是使用/deep/可以深度选择到子组件,也就不限于样式只对当前组件有效了。

/deep/可以用>>>进行替代,但是>>>这个某些预编译器可能无法正常解析,所以可以使用/deep/进行代替,作用是一样。

本文参考链接:

https://blog.csdn.net/qq_40851816/article/details/95213145

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用vue开发项目需要注意的问题和可能踩到的坑

    最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下:

    用户1741436
  • Vue:scoped与module的使用与利弊

    一个web应用是离不开html、css与js,其中css充斥的整个web项目中。css它有一个特定,它是全局的。这样的特性导致的结果是,一旦你在不同的地方定义了...

    Rouse
  • Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题

    如下为基于elementUI Dialog编写的一个组件,以npm run dev方式运行vue 项目时,自定义样式可以覆盖elementUI组件原有样式,但生...

    授客
  • vue全家桶开发的一些小技巧和注意事项

    用vue全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来,希望能帮到大家。以下内容基于最新版的vue + vuex + vue-rou...

    Nealyang
  • Vue 全家桶开发的一些小技巧和注意事项

    用 vue 全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来,希望能帮到大家。以下内容基于最新版的 vue + vuex + vue-...

    夜尽天明
  • Vue 组件扩展

    最近,新项目架构搭建在扩展组件的场景中:图表使用了extends方式,而公共业务server和view之间使用了mixins方式。对于二者的选择,我们通常会解释...

    奋飛
  • vue.js使用props在父子组件之间传参

    本篇文章是我参考官方文档整理的,供大家参考,高手勿喷! prop 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要...

    李文杨
  • 我练习项目眼中的 vue

    因为毕业设计开始了 vue 的学习之路,曾写过一些入门的 vue 小白学习文章系列(2018 我所了解的 Vue 知识大全(一))。如今已经工作半年了,这一次想...

    sunseekers
  • 面试必备 Vue 知识点

    Vue是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)

    前端老王

扫码关注云+社区

领取腾讯云代金券