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

桃扇骨 2021-09-08 06:48 489阅读 0赞

<template>
        <div class="cont">
            <footEr></footEr>
        </div>
    </template>
    <script>
        import footEr from '../../components/foot.vue'
            components: {footEr}
    </script>    
    <style scoped>
        .footer .index {
            color: #2a82e4;
        }
    </style>

方法一： style因为加了 scoper  只对当前组件起作用，那么直接在父组件中写子组件的样式是不会生效的

一种办法是父组件中的style去掉scoped，这种办法多半是不可取的，因为可能会影响全局样式

、第二种办法就是深度作用选择器( >>> 操作符)

<template>
        <div class="cont">
            <footEr></footEr>
        </div>
    </template>
    <script>
        import footEr from '../../components/foot.vue'
            components: {footEr}
    </script>    
    <style scoped>
        .cont >>> .index {　　　　/*cont是父组件包裹子组件的类名，index是子组件中要修改样式的类名*/
            color: #2a82e4;
        }
    </style>

如果是有些像Sass、less之类的预处理器无法正确解析 `>>> `。这种情况下你可以使用 `/deep/` 操作符取而代之——这是一个 `>>>` 的别名，同样可以正常工作。

方法三 /deep/

<style scoped lang="scss">
    .cont{
      /deep/ .index{
        color: #2a82e4;
      }
    }
    </style>
    
    或者  ::v-deep
    
    <style scoped lang="scss">
    .cont{
       ::v-deep .index{
        color: #2a82e4;
      }
    }
    </style>

发表评论取消回复

表情：

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

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

相关阅读

相关 vue父组件改变子组件的data

项目开发的过程中，我们会经常使用到ref，刚开始学习vue的时候以为这个是鸡肋，后来发现真香父组件改变子组件的data 父组件 <template> ...

曾经终败给现在/ 2024年04月19日 08:42/ 0 赞/ 84 阅读

相关 Angular2 父组件中修改子组件样式

情景：父组件FatherComponent中使用了子组件ChildComponent，父组件有自己的css文件，子组件也有自己的css文件，在父组件中修改了子组件的样式，但不起

比眉伴天荒/ 2024年02月19日 12:31/ 0 赞/ 41 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 vue 父组件调用子组件

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

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

相关 Vue入门-子组件向父组件通信与父组件调用子组件中的方法

子组件向父组件通信 > 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), > > 该方法在子组件的methods中声明,实现功能th

太过爱你忘了你带给我的痛/ 2021年09月15日 14:22/ 0 赞/ 512 阅读

相关 vue 子组件改变父组件的值

项目中遇到，子组件改变选值时，想改变父组件的值，尝试了两种办法，用到的`watch`和`computed`方式，看个人喜爱第一种： > 父组件传入一个方法，子

Dear 丶/ 2021年09月12日 01:16/ 0 赞/ 364 阅读

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

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

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