vue单文件组件中scoped属性原理

vue单文件组件是通过vue-loader来解析的。

vue-loader作用：解析单文件组件，在style中添加scope属性，会自动在该组件所有标签上添加以data-v开头的特性名，只有子组件的根节点标签会添加父组件以及子组件的以data-v开头的特性，样式会受到两个组件的影响，其他的标签均只会受到子组件内定义的样式的影响。

scoped属性说明：
1.使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
2.同一子组件自动生成的[data-v-be498722]是相同的，无论该子组件应用在哪里，或者应用了几次。
3.递归组件自动生成的[data-v-be498722]是相同的，所以设置的样式会应用到递归组件的所有对应标签。

 

举例说明如下：
1.未设置scope属性，不自动添加属性选择器，则该样式为全局样式：
.header   
.header {
    color: #f00;
}

2.设置scope属性后，会自动在选择器后面添加属性选择器：

1)属性选择器自动添加到最后一个选择器后面
.header   
.header[data-v-be498722] {
    color: #f00;
}

2)属性选择器自动添加到最后一个选择器后面
.header1 .header
.header1 .header[data-v-be498722] {
    color: #f00;
}

3）设置>>>后，属性选择器添加到>>>前的最后一个选择器后面
>>>.header   
[data-v-be498722] .header {
    color: #f00;
}

4）设置>>>后，属性选择器添加到>>>前的最后一个选择器后面
.header1>>>.header   
.header1[data-v-be498722] .header {
    color: #f00;
}