v-deep选择器

在 vue 中,为了防止 css 污染,会在style标签上添加一个scoped属性。所以,如果在父组件将 style 设置为scoped的时,如果想改变该父组件中引入的子组件样式,则不会生效。如下例:

parent

<template>
  <div class="app">
    <h1>parent</h1>
    <child></child>
  </div>
</template>

<style scoped>
.app h2 {
  color: red;
}
</style>

child

<template>
  <h2>I am child component</h2>
</template>

<style scoped></style>

此时设置的color: red将不会生效。此时,如果使用 v-deep 选择器,可以解决这个问题。

<style scoped>
.app >>> h2 {
  color: red;
}
</style>

如果使用 scss 或者 less 的写法,需要像下面这样写

<style lang="less" scoped>
/deep/ .app {
  h2 {
    color: red;
  }
}
</style>

与上述达到相同的效果,利用深度作用选择器,轻松解决此类问题。

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。