欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-29 14:33:59
...
<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>

 

相关标签: css css修改样式