VUE中的scoped属性和深度选择器

vue

众所周知，在vue中我们在style标签中写样式时，为了防止当前组件或页面的样式对外界其它的页面组件造成影响，会给vue中的 style标签加上 scoped 属性，该属性使样式变成了局域样式，只作用于当前组件。vue中的scoped属性的设计思想就是让当前组件的样式不会修改到其它地方的样式。

通过观察页面的DOM发现：vue中的scoped属性给相应的DOM结构和CSS选择器都加上了标识，这个唯一的标记保证了唯一性，从而达到了样式的私有化，不会污染全局的作用。这个标识就是给标签添加上一个 [data-v-hash] 的属性。

需要注意的是，如果当父组件、子组件同时使用 scoped 属性时，子组件最外层的标签会被加上当前组件的hash值，同时也会被加上父组件的hash

值。

同样的CSS样式部分的选择器也会被加上这个标识属性。

总结vue中的scoped属性实现样式私有化：

在vue中，为了不让当前组件的样式修改其它地方的样式，就有了scoped属性。但有时候不想用默认的样式，需要自定义自己的样式时，比如：引用的第三方组件库,

同时还不想去除scoped属性，避免污染全局，可以选择使用深度选择器。

在vue中，可以使用深度选择器 >>> 来穿透scoped，来修改样式，但是像 sass 之类的预处理语言无法正确解析 >>>，可以使用 /deep/ 操作符(>>> 的别名)

或者 ::v-deep 操作符(>>> 的别名)来实现同样的效果。

        <script scoped>
                外层类名 >>> 第三方组件类名{
                }
            </script>

        <script scoped>
                外层类名 /deep/ 第三方组件类名{
                }
            </script>

        <script scoped>
                外层类名 ::v-deep 第三方组件类名{
                }
            </script>