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>
上一篇: 讽刺同事的老板想笑就笑