其他22---scoped、>>>、/deep/、::v-deep

一、 Scoped CSS的原理

区别：

　　没有设置scoped时

<div class="login">登录</div>
<style>
.login {
    width: 100px;
    height: 100px
}
</style>

打包之后的结果是跟我们的代码一摸一样的，没有区别。

　　设置Scoped

<div class="login">登录</div>
<style scoped>
.login {
    width: 100px;
    height: 100px
}
</style>

打包之后的结果是跟我们的代码就有所区别了。如下：

<div data-v-257dda99b class="login">登录</div>
<style scoped>
.login[data-v-257dda99b] {
    width: 100px;
    height: 100px
}
</style>

我们通过上面的例子，不难发现多了一个data-v-hash属性，也就是说加了scoped，PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom，可以使得组件之间的样式不互相污染。

 

二、>>>、/deep/、::v-deep深度选择器

实际开发中遇到的例子：当我们开发一个页面使用了子组件的时候，如果这时候需要改子组件的样式，但是又不影响其他页面使用这个子组件的样式的时候。比如：

父组件：Parent.vue

<template>
  <div class="parent" id="app">
    <h1>我是父组件</h1>
    <div class="gby">
      <p>我是一个段落</p>
    </div>

    <child></child>
  </div>
</template>

<style scoped>
  .parent {
    background-color: green;
  }

  .gby p {
    background-color: red;
  }
  // 把子组件的背景变成红色，原组件不变
  .child .dyx p {
    background-color: red;
  }
</style>

子组件：Child.vue

<template>
    <div class="child">
        <h1>我是子组件</h1>
        <div class="dyx">
            <p>我是子组件的段落</p>
        </div>
    </div>
</template>

<style scoped>
    .child .dyx p {
        background-color: blue;
    }
</style>

这时候我们就会发现没有效果。但是如果我们使用>>>、/deep/、::v-deep三个深度选择器其中一个就能实现了。看代码:

<template>
  <div class="parent" id="app">
    <h1>我是父组件</h1>
    <div class="gby">
      <p>我是一个段落</p>
    </div>

    <child></child>
  </div>
</template>

<style scoped>
  .parent {
    background-color: green;
  }

  .gby p {
    background-color: red;
  }
  // 把子组件的背景变成红色，原组件不变
  ::v-deep .child .dyx p {
    background-color: red;
  }
</style>