【Vue】＜style＞中的scoped和v-deep

Vue中<style>的scoped和v-deep

组件样式

在vue中，我们通过<template>写HTML，<script> 写JavaScript，而把样式放进<style>中。但是直接写在<style>中的css是全局的，不同组件间的样式会互相影响。所以组件内部的样式我们一般加上scoped标记，避免不同组件间样式的影响。但是有时候（例如引用第三方组件时）我们发现加了scoped的样式并不起作用，所以我们会有/deep/ 、>>> 、 ::v-deep等方式使之生效。那它们各有什么作用呢？我们一步一步来。

1. 假设我们有这样的一个Layout组件

<template>
  <div class="container">
    <div class="header">
      Header
      <div class="title">Title</div>
      <div class="author">Author</div>
    </div>
    <div class="content">
      Content
    </div>
  </div>
</template>

<style lang="scss">
.container {
  div {
    color: #fff;
    border: 1px solid red;
    margin: 5px;
    padding: 5px;
  }
  .header {
    background: green;
    .title {
      background: blue;
    }
    .author {
      background: orange;
    }
  }
  .content {
    background: purple;
  }
}
</style>

大概长这个样子：

我们查看元素.container .header .title的css，最终生成的css为：

.container .header .title{
  background: blue;
}

2. 加上scoped 会怎样

<style lang="scss" scoped> /* ... */ </style>

此时vue会为组件内每个元素加上一个属性（attribute）：data-v-xxxxx。我们查看元素.container .header .title的css，最终生成的css为：

.container .header .title[data-v-xxxxx]{
  background: blue;
}

选择器最后多了一个data-属性，外观上依然是原来的样式，但是现在这些样式不会影响其他组件的样式了，因为它们都多了一个独特的data-属性。

3. 我们把.header部分独立成为一个组件

写一个MyHeader组件：

<template>
  <div class="header">
    Header
    <div class="title">Title</div>
    <div class="author">Author</div>
  </div>
</template>

然后在Layout组件中引入它：

<template>
  <div class="container">
    <my-header></my-header>
    <div class="content">
      Content
    </div>
  </div>
</template>

<script>
import MyHeader from "./MyHeader";
export default {
  components: { MyHeader }
};
</script>

此时<style>还是scoped，再看效果发现不对了：

此时我们查看元素.container .header .title的css，由于scoped的原因并不能找到如下这么一条：

.container .header[data-v-xxxxx] .title{
  background: blue;
}

也就是说scoped限制样式只在本组件内部有效，你不能通过css选择器来更改引入的子组件的样式。凡是试图修改本组件以外元素（或组件）的样式都会失败，这就是scoped的作用。

4. 给.header .title加上::v-deep

<style lang="scss" scoped>
.container {
  div {
    color: #fff;
    border: 1px solid red;
    margin: 5px;
    padding: 5px;
  }
  .header {
    background: green;
    ::v-deep .title {
      background: blue;
    }
    .author {
      background: orange;
    }
  }
  .content {
    background: purple;
  }
}
</style>

再看效果：

此时我们查看元素.container .header .title的css，看到了我们想看到的：

.container .header[data-v-xxxxx] .title {
    background: blue;
}

由于并没有给.container .header .author 和 .container div 加上::v-deep，所以它们的样式还是不对。

5. 全部加上::v-deep试试看

<style lang="scss" scoped>
.container {
  ::v-deep div {
    color: #fff;
    border: 1px solid red;
    margin: 5px;
    padding: 5px;
  }
  .header {
    background: green;
    ::v-deep .title {
      background: blue;
    }
    ::v-deep .author {
      background: orange;
    }
  }
  .content {
    background: purple;
  }
}
</style>

现在效果和最开始一样了，但是查看元素.container .header .title的css，注意css之间微妙的差异，尽管以下三种方式在效果上一样

• 没有scoped

.container .header .title{
  background: blue;
}

• 加上scoped

.container .header .title[data-v-xxxxx]{
  background: blue;
}

• 引入MyHeader子组件，加上scoped和::v-deep

.container .header[data-v-xxxxx] .title{
  background: blue;
}

总的来说，第二种应该是最合理的，css作用在了非常明确的位置；第一种和第二种都太宽泛，都可能影响到其他地方的样式。实际中我们经常会有需求要修改第三方组件库的样式，不可避免的要用到第三种。但是如果是自己写组件，应当更合理地组织样式管理。

6. 改进MyHeader组件

上面我们在Layout组件中写.header的样式，本身就是不合逻辑的，我们应当把它挪进MyHeader组件内部。

<template>
  <div class="header">
    Header
    <div class="title">Title</div>
    <div class="author">Author</div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  background: green;
  .title {
    background: blue;
  }
  .author {
    background: orange;
  }
}
</style>