【Vue项目笔记心得】深度选择器

scoped

对于某一个组件，如果style添加上scoped属性，给当前子组件的结构中都添加上一个data-v-xxxx自定的属性。

vue是通过属性选择器给需要添加的元素加上样式。

scoped作用：只对当前的组件有用（样式）

在父组件中再添加一个子组件，子组件的根标签，会拥有父组件当中的自定义属性。

注意下面只有div标签有data-v-7ba5b90属性：

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

这里h3也就相当于根标签了，也具有父组件的data-v-7ba5b90属性：

小结：

加了scoped

加了scoped只对父组件和子组件的根标签有用，子组件的内容里面没有父组件的那个属性。

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

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

原生CSS： >>>
less： /deep/
scss： ::v-deep

加上之后，自定义data-v-7ba5b90属性就没有用了。

深度选择器使得子组件有和父组件一样的属性。