vue中scoped的原理——深度选择器

1、scoped属性的作用                       

                 ——加上scoped的作用只是对于当前的组件有用（样式）

对于某一个组件，如果style添加上scoped属性，给当前子组件的结构中都添加上一个data-v-xxxx自定义属性，会发现vue是通过属性选择器，给需要添加的元素添加上样式。

h3[data-v-106c86ed]

2、子组件的根标签

                                                        ——拥有父组件当中相同的自定义属性

如果子组件的根节点和父组件中书写的样式相同，也会添加上相同的样式。

子组件：此时子组件的根标签是h3

显示效果：

 子组件：此时子组件的根标签是div，所以此时是div拥有和父组件相同的自定义属性

 所以此时子组件中的h3并不会显示出父组件的样式

 显示效果：

3、深度选择器

如果父组件的样式（scoped），而且还想影响到子组件的样式，这时候我们可以使用深度选择器。

深度选择器可以实现样式穿透：

（1）原生css       >>>

（2）less             /deep/

（3）scss           ::v-deep

子组件：

<template>
  <div>
    <ul>
        <li><h3>吃饭</h3></li>
        <li><h3>睡觉</h3></li>
        <li><h3>打豆豆</h3></li>
    </ul>
  </div>
</template>

想要在子组件中显示父组件scoped中的样式，在父组件的样式中加上>>>

<style scoped>
    >>>h3{
        color: red;
    }
</style>

(虽然子组件内的h3没有父组件的自定义属性，但是还是会展示父组件的样式)

显示效果: