Vue中如何正确运用scoped属性与deep属性实现深度作用？

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

在组件中使用`style`标签添加`scoped`属性，可以避免组件内样式对全局或外部组件造成污染。`scoped`属性使得样式只作用于当前组件，形成局部作用域。原理如下：

在编译组件时，Vue会为每个`scoped`样式添加一个唯一的属性，如`data-v-f3f3eg9`，这样即使样式名相同，由于属性不同，它们也不会互相影响。这使得组件内的样式只应用于当前组件，不会影响到其他组件。

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

原理如下-------

在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。值得注意的是,当父组件，子组件同时使用scoped属性时，子组件最外层的标签既会被加上当前组件的hash值，又会加上父级组件的hash值,像这样

//子组件最外层标签
<div data-v-b45036b2 data-v-384b136e ></div>

但是有个问题------

在我们用scoped的时候回发现一个问题，就是我们在当前组件内使用的scoped，但是我想在当前组件内改变子组件的样式(非最外层标签)，的时候会发现不好使。