如何正确运用Vue的scoped和deep属性实现深度样式穿透？

本文共计824个文字，预计阅读时间需要4分钟。

众周知，在组件中给`style`标签添加`scoped`属性，可以避免组件内样式对全局造成污染。`scoped`属性使得样式变为局部作用域，仅作用于当前组件，不会影响到外部组件。这样，组件内的样式变化不会影响到其他组件，保证了样式隔离。

原理如下：

- 在编译组件时，`scoped`属性会使得样式通过特殊的属性选择器进行封装，确保样式只应用于当前组件。- 这种封装后的样式选择器会添加一个基于组件名称的唯一属性，使得样式只作用于当前组件的元素。

众所周知，在组件中给style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染，scoped使得组件内的样式变成局域样式，只作用于当前组件。

原理如下-------

在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。