Java OpenResty Spring Spring Boot MySQL Redis MongoDB PostgreSQL Linux Android Nginx 面试 小程序 Arthas JVM AQS juc Kubernetes Docker 诊断工具


Vue 父组件中修改子组件样式

Vue 大约 370 字

scoped

style中增加了scoped属性,则样式只会在当前组件中生效。

deep

父组件的style中定义/deep/Vue3中会报错)或::v-deep

<style scoped>

/deep/ h3 {
  color: red;
}

::v-deep h3 {
  color: red;
}

</style>

原理

增加了scoped的样式在Chrome中查看可以看到增加了类似[data-v-001]后缀。

h3[data-v-001] {
  color: red;
}

/deep/::v-deep会转变为:

[data-v-001] h3 {
  color: red;
}

使用场景

使用第三方组件库时,需要修改第三方组件库中的样式,可以用到/deep/::v-deep

阅读 287 · 发布于 2022-12-25

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb

扫描下方二维码关注公众号和小程序↓↓↓

扫描二维码关注我
昵称:
随便看看 换一批