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>

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

如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！

如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！