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

Myth丶恋晨 2022-11-13 09:26 325阅读 0赞

# 一、概述 #

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

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

# 二、解决方法 #

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

<style scoped lang='scss'>
       ...
    </style>
    <style lang="scss">
    //.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 lang="scss">
      ...... 
      .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][https_blog.csdn.net_qq_40851816_article_details_95213145]

[https_blog.csdn.net_qq_40851816_article_details_95213145]: https://blog.csdn.net/qq_40851816/article/details/95213145

发表评论取消回复

表情：

评论列表（有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue里面父组件如何修改子组件样式

文章目录一、去掉 scoped 二、混用本地和全局样式三、使用深度作用选择器在使用 vue 的开发中，我们有时会引用外部组件，包括 UI

骑猪看日落/ 2022年12月21日 10:59/ 0 赞/ 380 阅读

相关 VUE_Vue父组件调用子组件方法,uni-app父组件调用子组件方法

//父组件 <template> <div class="home"> <HelloWorld ref="mychild"></He

ゞ浴缸里的玫瑰/ 2022年12月16日 06:15/ 0 赞/ 299 阅读

相关 VUE_vue子组件调用父组件方法，uni-app子组件调用父组件方法

父组件引入组件header <Header @call="call" /> 父组件methods添加方法 call(){ conso

比眉伴天荒/ 2022年12月11日 03:23/ 0 赞/ 260 阅读

相关父组件修改子组件的样式

父组件： Father.vue <template> <Child /> </template> 子组件： Child.v

约定不等于承诺〃/ 2022年11月17日 13:36/ 0 赞/ 183 阅读

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

一、概述项目需要的原因，在sub组件的父级list组件中需要用到xhcj组件，同时sub组件中也用到了xhcj组件，两个地方代码逻辑是相同，仅仅是样式有些微的差别，所以

Myth丶恋晨/ 2022年11月13日 09:26/ 0 赞/ 326 阅读

相关 Vue $parent、子组件调用父组件方法，父组件调用子组件方法

[https://blog.csdn.net/zgrkaka/article/details/100528714][https_blog.csdn.net_zgrkaka_ar

超、凢脫俗/ 2022年10月06日 01:50/ 0 赞/ 282 阅读

相关 vue 父组件调用子组件的方法，子组件调用父组件方法

首先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

╰+攻爆jí腚メ/ 2022年04月17日 04:55/ 0 赞/ 564 阅读

相关 vue中组件通讯--子到父

步骤：父组件提供一个方法这个方法是子组件调用的，数据通过方法的参数拿到将这个方法传递给子组件由子组件触发这个方法，将要传递的数据作为方法的

客官°小女子只卖身不卖艺/ 2021年12月23日 03:21/ 0 赞/ 236 阅读

相关 vue 父组件调用子组件

1、在父组件里引用自组件 <generate-report @closeAddReport="closeAddReport" ref="addreport"><

谁借莪１个温暖的怀抱￠/ 2021年11月17日 09:02/ 0 赞/ 448 阅读

相关 Vue在父组件中改变子组件内的某个样式

<template> <div class="cont"> <footEr></footEr> </div>

桃扇骨/ 2021年09月08日 06:48/ 0 赞/ 477 阅读