VueJS的文档表明,scoped
应该将样式限制在组件内部。但是如果我创建两个具有相同baz
样式的组件,它将从一个组件泄漏到另一个组件:
foo.vue
<template>
<div class="baz">
<Bar></Bar>
</div>
</template>
<style scoped>
.baz {
color: red;
}
</style>
bar.vue
<template>
<div class="baz">bar</div>
</template>
<style scoped>
.baz {
background-color: blue;
}
</style>
我希望baz
在两个组件中是不同的。但是生成网页后,我发现蓝色背景上的红色文字,这意味着foo
的作用域样式影响了bar
组件。生成的代码如下:
<div class="baz" data-v-ca22f368>
<div class="baz" data-v-a0c7f1ce data-v-ca22f368>
bar
</div>
</div>
正如您所看到的,“漏洞”是由VueJS通过在 bar
组件中指定两个数据属性而故意生成的。但是为什么呢?