【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 {